响应式布局
2016-11-24 本文已影响16人
104cbf61ed9c
优点：解决设备的差异化显示
缺点：兼容性代码 工作量大 加载速度受影响； 对原有网站布局会产生影响用户判断未必精确；
响应式原则：
再设计初期就要考虑在多终端显示模式渐进增强；
充分发挥硬件最大功能
如何实现：
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)
