CSS3 Media Query

　　在移动端火爆的今日，一个好的web应用不仅仅要有对应移动平台的APP，自己web网页也需要对不同屏幕大小的移动设备进行支持，也就是我们所说的响应式web页面。

本篇文章就来介绍下最常见的响应式页面的实现方式CSS3的 Media Query属性。

　　其常见属性:

　　device-width,device-height 屏幕宽高

　　width，height 窗口宽高

　　orientation 设备方向

　　resolution 设备分辨率 （DPI决定）

 

1.外联方式实现Media Query

使用link标签引入外部的css文件，需要添加属性media:

　　

<link type="text/css" rel="stylesheet" href="./link.css" media="only screen and (max-width:480px)"/>

2.内联式实现Media Query

使用类似语法不过是在<style>标签内实现：

@media screen and (min-width:480px){

		body{

			background:blue;

		}

}