Gridpak 的目的是实现了响应式的 Web 页面设计，提高您的工作流程，节省了时间。通过生成PNG图像，CSS和JavaScript，，让 Gridpak 创建响应式的简单界面。
Gridpak 产生的CSS 兼容 IE 8+，但它使用很多实验性的CSS属性，如媒体查询，盒大小和背景剪辑属性，所以我们建议您结合 Modernizer 来使用，确保向后兼容性。
-
什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 设置 Viewport 一个常用的针
-
CSS3响应式网页设计 响应式网页设计提供最佳体验，易于阅读和轻松导航，只需在桌面，手机和标签等不同设备上进行最小尺寸调整。 反应灵敏的结构 下图显示了网页的响应结构。 灵活的网格演示 <html> <head> <style> body { font: 600 14px/24px "Open Sans",
-
本章节为大家介绍响应式 Web 设计框架 Bootstrap。 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 实例<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <m
-
.bg1 { width: 100%; height:400px; background-image:url('https://www.wenjiangs.com/wp-content/uploads/runoob/img_flowers.jpg'); background-repeat:no-repeat; background-size:contain; border:1px solid re
-
使用 width 属性 如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例： 实例video { width: 100%; height: auto; } 注意在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。 使用 max-width 属性 如果 max-width 属性设置为
-
媒体(media)查询在 CSS3 上有介绍： 添加断点 在先前的教程中我们使用行和列来制作网页，它是响应式的，但在小屏幕上并不能友好的展示。 媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点，不同的断点有不同的效果。 桌面设备 手机设备 使用媒体查询在 768px 添加断点： 实例 当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100%:/* For desktop:
-
什么是网格视图? 很多网页都是基于网格设计的，这说明网页是按列来布局的。 使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。 响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。 以上实例包含两列。 12 列的网格系统可以更好的控制响应式网页。 首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。 在每列中指定 class， cla
-
左一个如果固定大小，右一个应该是响应的，应该有最小和最大宽度，这意味着如果你收缩窗口宽度，右div应该只是收缩它的宽度！（在其最小宽度和最大宽度之间）并保持在左div的右边！，直到容器div的宽度小于左div宽度+右div最小宽度，然后右div应该低于左div！ http://jsfiddle.net/5m8lj/6/ 宽度当前css，绿色div应该收缩其宽度在200到500px之间，同时保持在左