@media CSS @规则 可用于根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。

举一个简单的例子：网页的字体大小随窗口的大小而改变

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

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

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