响应式页面设计

响应式页面：

1、viewport视图
首先在头部插入
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
其中，width 控制viewpoint的宽度，可以是固定值，也可以是device-width，即设备的宽度。
2、调用不同的css文件
在不同页面大小下页面由不同的css控制，这时候需要用
<link rel="stylesheet" type="text/css" media="screen and (min-width: 614px) and (max-width: 810px)" href="css/index_m.css" />

这表示页面宽度如果在614-810px，就调用外部的index_m.css，即显示index_m.css控制的页面样式。
3、块状元素不设置绝对宽度
在响应式页面中，不设置绝对宽度，例如：width: 300px;    需要设置百分比宽度：width: 50%;（表示这个块状元素的宽度相当于页面宽度的50%）或者设置成 width: auto;
4、字体不设置绝对大小
字体大小设置时需要用em，例如font-size: 1.5em;    一般浏览器默认字体大小为1em=16px。
5、尽量不用绝对定位。