如何实现响应式布局：
1. css3-Media Query //最简单的方式
2. 原生JavaScript //成本高 不建议使用
3. 第三方开源框架 //可以很好的支持浏览器响应式布局的设计
常见的属性：
device-width,device-height; 屏幕宽高width,height; 渲染屏幕宽高orientation; 设备方向 （例如手机页面横屏显示或者竖屏显示）resolution; 设备分辨率
基本语法：
外联CSS语法
<link href="link.css" media="only screen and(max-width:480px)" />
先引入外部样式表，media是css才有的属性，“只有在屏幕分辨率小于或等于480px像素的时候”，才会这个外联样式才有效。
内嵌样式的语法
<style>
@media screen and(min-width:480px){
只有当页面大于480px的时候，这里面的样式才会有效。
color:red;
}
</style>
