利用@media screen实现页面自适应
优点：无需插件和手机主题，对移动设备友好，能够适应各种窗口大小。只需要在CSS中添加@media screen属性，根据浏览器宽度判断并输出不同的样式。
<div class="a">哈哈啊哈</div>
首先没有样式的情况下，字体显示黑色
然后加上部分样式，将文字改为红色，26px：
.a{
color: red;
font-size: 26px;
}
显示效果如下：
随后，添加@media screen属性，控制自适应的样式。
文字蓝色，26px
@media screen and (max-width: 600px){
.a{
color: blue;
font-size: 26px;
}
}
上面的代码表示，当页面的宽度小于600px时，类a的样式将采用下面的样式。
当页面小于600px时，样式如下：
还可以指定一个区间，代码如下：
@media screen and (min-width: 900px) and (max-width: 1200px){
.a{
color: purple;
font-size: 26px;
}
}
此段代码表示：当宽度介于900px到 1200px之间时，采用下面的样式。效果如下：
