响应式布局

概述

优点:
* 解决了设备可见的差异性
缺点:
* 兼容性代码多,工作量大,加载速度受影响
* 对原有网站布局会产生影响,用户判断未必精准
原则:
* 设计初期要考虑页面如何在多终端展示
渐进增强:
* 充分发挥硬件设备的最大功能(一些效果可以在低端设备放弃)

实现

1. CSS3 - Media Query 最简单的方式
2. 借助原生的JavaScript 成本更,不推荐使用
3. 第三方开源框架

Media Query

常见属性:
* device-width, device-height 屏幕宽高
* width, height 渲染窗口宽高
* orientation 设备方向
* resolution 设备分辨率

// width小于480px时使用link.css
 <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width: 480px)">
    <style>
        @media screen and (min-width: 480px){
            body{background-color: pink}
        }
    </style>