实现响应式布局的方式-CSS3实现

如何实现响应式布局：

 1. css3-Media Query           //最简单的方式
 2. 原生JavaScript            //成本高 不建议使用
 3. 第三方开源框架              //可以很好的支持浏览器响应式布局的设计

---

一、css3-Media Query

常见的属性：

• 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>