响应式设计的优缺点
优点
解决了设备之间的差异化展示
缺点
兼容性代码多,工作量大,加载速度受影响
对原有网站布局会产生影响,用户判断未必精确
响应式设计的原则
移动优先
在设计的初期就要考虑的页面如何在多终端展示
渐进增强
充分发挥硬件设备的最大功能
实现响应式布局:
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的核心是栅格化布局,要着重掌握。
时间: 2024-10-27 09:26:07