<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@media</title>
<meta name="hugo" content="" />
<style>
.test1,
.test2 {
display: none;
}
/* 本条为CSS2部分，IE8及以下只支持本条 */
@media screen {
body{ color: #f00; }
}
/* 下列为CSS3部分 */
@media screen and (min- 960px) and (max- 1024px){
body{ background: #999; }
}
@media screen and (min- 768px) and (max- 960px) {
.test1 { display: block; }
}
@media screen and (min- 468px) and (max- 768px) {
.test2 { display: block; }
}
</style>
</head>
<body>
<div>Media</div>
<div class="test1">(min- 768px) and (max- 960px)</div>
<div class="test2">(min- 468px) and (max- 768px)</div>
</body>
</html>
如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：
@media (min- 700px), handheld and (orientation: landscape) { ... }
比如 monochrome 应用于彩色显示设备
操作符 not，and 和 only 可以用来构建复杂的媒体查询。and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。not 操作符用来对一条媒体查询的结果进行取反。only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。
若使用了 not 或 only 操作符，必须明确指定一个媒体类型。
你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max- 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max- 600px) {
.facet_sidebar {
display: none;
}
}
</style>