响应式布局

优点：解决设备的差异化显示

缺点：兼容性代码 工作量大 加载速度受影响； 对原有网站布局会产生影响用户判断未必精确；

响应式原则：

再设计初期就要考虑在多终端显示模式渐进增强；

充分发挥硬件最大功能

如何实现：

css-media query

借助原生javascript

第三方开源框架

css-media query

常见属性：

device-width,device-height 屏幕宽高

width，height 渲染窗口宽高

orientation 设备方向

resolution 设备分辨率

max-width     x<max-width

min-width       x>min-width

bootstrap

框架不仅可以帮助解决低端浏览器不支持css3的问题，同时解决了不同分辨率上网页布局的展示。

ie8需要引入respond.js（response.js必须部署在webserver域名下面，否则会出现跨域问题） ，使ie8支持medium query属性。

引入<meta name="viewport" content="width=device-width,initial-scale=1.0">

引入bootstrap.css(bootstrap.js依赖jQuery)

grid system 栅格系统 列布局