CSS3 media queries

响应式页面布局的引用media queries判断设备尺寸规格后的基本使用方法：

1.通过link引入文件式

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)"> //屏幕大于400px时应用styleA.css文件

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)"> //屏幕大于600px小于800px时应用styleB.css文件

screen是媒体类型，css2.1定义了10种媒体类型

and是关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中

2.通过内嵌式

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

写法即前面加@media，其它跟link里的media属性一致

3.IE部分的兼容性

调用css3-mediaqueries.js文件，来帮助IE8或是之前的版本支持CSS3 media queries：

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->