您的位置:首页 - 教程 - web前端 - 正文
响应式开发思想

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

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


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

实现响应式布局:
1.CSS3-Media Query(最简单的方式)
CSS3-Media Query 常见属性:

device-width,device-height —— 屏幕宽高(设备物理宽高)

width,height —— 渲染窗口宽高(实际宽高)

orientation —— 设备方向

resolution —— 设备分辨率

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

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

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

 @media screen and (min-width: 480px) {
     body {
         background: blue;
     }
 }

 

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

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


评论: