(1)、什么是 Viewport？
viewport 翻译为中文为"视区/视窗/视口"，就是指用户网页的可视区域。手机浏览器是把页面放在一个虚拟的 viewport 中，通常这个虚拟的 viewport 比屏幕宽，这样就不用把每个网页挤到很小的窗口中，这样会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来查看网页的不同部分。
(2)、 设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport 元素大致如下：
代码解析：
width：控制 viewport 的大小，可以是指定的一个值，比如 1920，或者是特殊的值，如 device-width 为设备的宽度，单位为缩放为 100% 时的 CSS 的像素。
height：和 width 相对应，指定高度，可以是指定的一个值，比如 1080，或者是特殊的值，如 device-height 为设备的高度。
initial-scale：初始缩放比例，即当页面第一次载入是时缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
2、 响应式 Web 设计 - CSS 栅格系统(1)、什么是栅格系统？
栅格系统也叫做网格视图，即通过固定的格子结构，来进行设计布局网页，响应式设计就是网格视图的实现方式。
很多网页都是基于网格设计的，这说明网页是按列来布局的。使用网格视图有助于我们设计网页，这让我们向网页添加元素变的更简单。
响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。如下：
响应式设计就是让一个网站兼容多个终端，即为一个页面设计多种布局结构，分别适配不同屏幕尺寸的设备，就像下图显示这样：
通过上图，不难发现一个页面可以拆分成多个区块，而这些区块就构成了网页的布局，根据不同的屏幕尺寸，调整这些区块的排版，就可以实现响应式设计。此外，通过对比上图中不同设备的区块位置，当屏幕宽度较大时，区块倾向于水平分布，而当屏幕缩小时，区块则倾向于垂直堆叠。
(2)、 创建响应式网格视图
首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。该属性允许以确切的方式定义适应某个区域的具体内容。当值为 border-box 时，为元素设定的宽度和高度决定了元素的边框盒。也就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
确保边距和边框包含在元素的宽度和高度间，可以添加如下代码：
1 *{2 box-sizing:border-box;3 } 下面的例子，是一个简单的响应式网页，包含两列：
1 2 3 4 5 6 简单的响应式网页 7 8 *{ 9 box-sizing:border-box;10 }11 .header{12 border:1px solid red;13 padding:15px;14 }15 .menu{16 width:25%;17 float:left;18 padding:15px;19 border:1px solid red;20 }21 .main{22 width:75%;23 float:left;24 padding:15px;25 border:1px solid red;26 }27 28 29 30 31
页头
32
查看更多关于CSS响应式设计_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111400