CSS系列之媒体查询

[yuanyuanbyte]

媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

最简单的媒体查询语法看起来是像这样的：

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

它由以下部分组成：

• 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
• 一个媒体表达式，是一个被包含的CSS生效所需的规则或者测试；
• 一组CSS规则，会在测试通过且媒体类型正确的时候应用。

一个例子：

@media screen and (width: 600px) {
    body {
        color: red;
    }
}