响应式开发思想

标签：

响应式设计的优缺点
优点
解决了设备之间的差异化展示
缺点
兼容性代码多，工作量大，加载速度受影响
对原有网站布局会产生影响，用户判断未必精确

响应式设计的原则
移动优先
在设计的初期就要考虑的页面如何在多终端展示

渐进增强
充分发挥硬件设备的最大功能

实现响应式布局：
1.CSS3-Media Query（最简单的方式）
CSS3-Media Query 常见属性：

device-width,device-height —— 屏幕宽高（设备物理宽高）

width，height —— 渲染窗口宽高（实际宽高）

orientation —— 设备方向

resolution —— 设备分辨率

文档小于等于480px的时候调用

1 <link type=‘text/css‘ rel=‘stylesheet‘ href=‘link.css‘ media=‘only screen and (max-width:480px)‘/>

文档大于等于480px的时候调用

1 @media screen and (min-width: 480px) {
2     body {
3         background: blue;
4     }
5 }

2.借助原生JavaScript（成本高，不建议使用）
3.第三方开源框架（可以很好的支持浏览器响应式布局的设计）

Bootstrap高度组件化，使用时不要尝试重新开发。
Bootstrap的核心是栅格化布局，要着重掌握。

响应式开发思想

标签：

原文地址：http://www.cnblogs.com/lqcdsns/p/5372906.html