media 适屏

<!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-width: 960px) and (max-width: 1024px){
    body{ background: #999; }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
    .test1 { display: block; }
}
@media screen and (min-width: 468px) and (max-width: 768px) {
    .test2 { display: block; }
}
</style>
</head>
<body>
<div>Media</div>
<div class="test1">(min-width: 768px) and (max-width: 960px)</div>
<div class="test2">(min-width: 468px) and (max-width: 768px)</div>
</body>
</html>

如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }


比如 monochrome 应用于彩色显示设备

操作符 not，and 和 only 可以用来构建复杂的媒体查询。
and 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。
若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。

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

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

posted on 2015-10-04 23:02 HGonlyWJ 阅读(177) 评论(0) 收藏举报