响应式设计的那点事

响应式设计在前端开发中占有很大的比重，趁着现在时间充裕，我把自己学习过程中遇到的关于响应式设计的知识梳理以下：
响应式设计：简单来说就是使一个网站能够兼容多个终端。
要想实现响应式布局，就要做到弹性网格布局，弹性图片外加良好的媒体查询。而它的设计原则就是渐进增强或者优雅降级。
从头开始说起，要想在移动端展现PC端的网页，就需要在header标签内设置视口属性（viewport）;示例如下：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scale=no"/>

width：视口宽度；height：视口高度；device-width：渲染表面的宽度，就是设备屏幕的宽度；device-height：渲染表面的高度，就是设备屏幕的高度；minmum-scale:最小缩放比；
maxmum-scale:最大缩放比，user-scale:是否允许用户手动缩放；

接着来说px，em和rem它们之间的关系，为什么要说明这几个单位呢？因为在布局当中有很多地方都涉及到距离，了解清楚它们几个的关系，我们才能更好的布局。
em：相对长度单位，em相对参照物为父元素的font-size，em具有继承的特点，当没有设置font-size时，浏览器会有一个默认的em设置：1em = 16px；
em的缺点：容易混乱，
rem：相对长度单位， 相对参照物为根元素html，当没有设置font-size时，浏览器会有一个默认的rem设置：1rem = 16 px，这点与em很像。
在实际的响应式布局中，遵循的规则就是：大块布局采用百分比的方式，大块内的布局采用rem去实现布局；最常用根元素设置font-size:62.5% 1rem = 10px;。
弹性图片的处理就是通过picture标签来实现，对于IE这种低级动物来说，就需要外部工具（polyfillJS）来帮他识别picture标签并实现响应式。
下面该响应式设计中的顶梁柱--媒体查询登场了，在使用媒体查询时，我们应该针对屏幕大小（大屏幕，中屏幕，小屏幕）去写响应式，而不是针对特定的移动端设备去写（除非是有特别要求）。简单示例如下：

@media screen and ( max-width: 980px ) {
#wrap {width: 90%; margin:0 auto;}
#content {width: 60%;padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%;margin-bottom: 10px;}
}

@media的具体使用规则可百度。
最后有一点要说明，还是万恶的IE（由于他不兼容css3的媒体查询属性）需要引入respondJS文件来让他实现响应式。

题外话

现在有许多开发完整的响应式框架供我们使用，在开发过程中我们可以直接引入这些框架使用，使用较多的有bootstrap,Foundation,semantic UI,Pure Css