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 定义一个动画

发表评论

邮箱地址不会被公开。 必填项已用*标注