响应式web之@media screen

　　两个概念：媒体类型（Media Type）和 媒体特性（Media Query）

　　Media Type：我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）

　　Media Queries：能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。

　　媒体特性可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)

　　引入两种方法

　　1、link方法

<link rel="stylesheet" type="text/css" href="w400.css" media="screen and (min-width: 400px)">

　　当屏幕宽度小于400px，应用w400.css样式

　　2、@media引入 

@media screen and (max-width: 400px) { /*当屏幕尺寸小于400px时，应用下面的CSS样式*/ 　　 /*style*/ 　　}

　　Media Queries的具体使用方式

　　1、最大宽度Max Width

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

　　当屏幕小于或等于600px时，将采用pc.css样式来渲染Web页面

　2、最小宽度min Width

<link rel="stylesheet" media="screen and (min-width:900px)" href="mobile.css" type="text/css"  />

　　当屏幕大于或等于900px时，将采用mobile.css样式来渲染Web页面　

　3、多个Media Queries使用

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

　　当屏幕在320x-480px之间时采用style.css样式来渲染web页面