核心提示：一、如何实现响应式布局1 CSS3-Media Query 最简单的方式2 借助原生JavaScript 成本高，不推荐3 第三方开源框架二、用CSS3-Media Query 实现响应式布局常见属性...
一、如何实现响应式布局
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>
