css3 @media规则

        今天准备调整下手机模板，却始终没有找到手机对应的模板，通过分析html源码，发现PC和手机端输出的内容是完全一样的，只是通过CSS控制了手机端的显示格式和内容而已。通过查看css代码发现，手机端是通过@media实现的css规则自定义。觉得很酷炫，于是研究了下@meidia规则

语法：

@media 设备类型 and（设备特性）{
//css代码
}

可以在不改变html内容情况下，根据媒体设备不同，浏览器窗口尺寸不同使用不同的css样式。

设备类型
        

设备特性

示例：

//窗口宽度大于900px
@media screen and(min-width:900px)
{
  body{
       font-size:25px;
      }
}
//窗口宽度大于500px小于900px
@media screen and(min-width:500px)and(max-width:900px)
{
  body{
       font-size:20px;
      }
}
//窗口宽度小于500px
@media screen and(max-width:500px)
{
  body{
       font-size:15px;
      }
}

css3 中类似的规则还有：

     @import 引入外部的CSS文件

     @font-face 设置自定义字体

     @keyframes 定义一个动画