一、如何实现响应式布局

1 CSS3-Media Query 最简单的方式

2 借助原生JavaScript 成本高，不推荐

3 第三方开源框架

二、用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)"/>

内嵌式：

<style>
    // 只有当屏幕大于480px时生效
    @media screen and (min-width:480px){
        body{background:blue;}
    }
</style>