响应式布局

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

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

响应式原则:

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

充分发挥硬件最大功能

如何实现:

css-media query

借助原生javascript

第三方开源框架

css-media query

常见属性:

device-width,device-height 屏幕宽高

width,height 渲染窗口宽高

orientation 设备方向

resolution 设备分辨率

max-width     x

min-width       x>min-width

bootstrap

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

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

引入

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

grid system 栅格系统 列布局

你可能感兴趣的:(响应式布局)