响应式设计要点

项目前需考虑：

所谓响应式就是一个URL链接，可以适配 PC端、iPad、移动端等设备。

1. 兼容到 IE 几 （响应式在IE8以下是做不到的）
2. 选择什么设备开发
3. 选择什么浏览器开发

顺序：先完写HTML，再写CSS，再写JS。
尽量不要在CSS样式里写宽 width，尤其不要写高 height

meta 视口的设置

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
<!--
width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no) 
-->

媒体查询

@media 媒体类型and （媒体特性）{你的样式}
如：

@media screen and (max-width: 300px) {
    body {
        background-color:red;
    }
}

或者

link元素中的CSS媒体查询

<link rel="stylesheet" media="screen and (max-width: 500px)" href="css.css">

使用HTML5中的 picture 元素响应式处理图片

如：

<picture>
    <source media="(max-width: 500px)" srcset="img/2.jpg">
    <img src="img/1.jpg" >
</picture>

使用 picturefill.js 来处理 picture 标签的兼容性