CSS3媒体查询@media功能使用总结 | GCidea's blog

• 1. 前言
• 2. 示例
• 3. 语法
• 4. 媒体功能

前言

　　媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围，这些表达式会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备的类型以及所有的表达式的值都是true，那么该媒体查询的结果就是true。例如width，height，color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。

示例

1
2
3
4
5
6
7
8
9
10
11

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 600px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

解释：

1. 当媒体查询是true时，其相应的样式表或样式规则就会被应用。比如上面的写法表示，当设备宽度在600px以内，就会应用example.css中的样式或者使得”.facet_sidebar”这个类生效。
2. 样式遵循正常的级联规则.即使媒体查询返回false,标签指向的样式表也将会被下载(尽管,他们将不会被采用)

语法

1
2
3

@media mediatype and|not|only (media feature) {
    CSS-Code;
}