@media
Media Queries(媒体查询)，他的作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。
其实就是，允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。
screen（屏幕）是媒体类型里的一种，css2.1定义了10种媒体类型。
and被称为关键字，其他关键字还包括not(排除某种设备)，only(限定某种设备)。
(min-400px) 就是媒体特性，被防止在一堆圆括号内。
写法：
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-600px) and (max-800px)">
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-400px)">
@media screen and (max-600px){
.classname{
background:#ccc;
}
}
/*设备物理像素与设备独立像素比例，（一般用于判断横屏显示还是竖屏显示）*/
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" href="iphone4.css"/>
/**横屏显示**/
/*(orientation:portrait) 横向 (landscape)*/
写的时候必须要有空格，否则不生效
@media all and (orientation : landscape) {
h2{color:red;}/*横屏时字体红色*/
}
/**竖屏显示**/
@media all and (orientation : portrait){
h2{color:green;}/*竖屏时字体绿色*/
}
ie9以下的浏览器不支持css3的@media属性，我们的解决方法是加载一个兼容的js库
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
响应式布局时的注意事项：
1.字体使用rem
html{
font-size:62.5%;
}
font-size:2rem==font-size:20px;
2.设置最小宽度和最大宽度
min-width 和 max-width
3.宽度设置成百分比，不固定宽度
4.使用边框盒模型
box-sizing:border-box;