媒体查询
字数统计:1.4k字目录
css的媒体查询允许通过@media标签为特定媒体的浏览器设定样式,其中包含众多筛选,功能强大。
定义
HTML4和CSS2支持为不同的媒体类型指定专用的样式表,screen
和print
, projection
是已定义的媒体类型
媒体查询由 媒体类型 和 一个或多个检测媒体特性的的条件表达式组成。
相对于CSS2只支持对媒体类型进行判断,媒体查询
增加了媒体特性
的判断,能够更准确地根据设备特性指定专用的样式。
语法逻辑
1 | # 和 |
使用
语法
媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true。1
2
3
4
5
6
7
8
9
10
11# link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
# 样式表中的CSS媒体查询
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
使用媒体类型
1 | <link rel="stylesheet" type="text/css" href="site.css" media="screen" /> |
media 属性定义了应该用于指定每种媒体类型的样式表:
screen
适用于计算机彩色屏幕。
print
适用于打印预览模式下查看的内容或者打印机打印的内容。
作为 CSS v3 规范的一部分,可以扩展媒体类型函数,并允许在样式表中使用更精确的显示规则。媒体查询 是评估 True 或 False 的一种表达。如果为 True,则继续使用样式表。如果为 False,则不能使用样式表。这种简单逻辑通过表达式变得更加强大,使您能够更灵活地对特定的设计场景使用自定义的显示规则。
媒体查询规则
@media all and (min-width: 800px) { ... }
@media all
是媒体类型,也就是说,将此 CSS
应用于所有媒体类型(min-width:800px)
是包含媒体查询的表达式,如果浏览器的最小宽度为 800 像素,则会告诉浏览器只运用下列 CSS
。
请注意:可以省略关键词 all
和 and
。在将某个媒体查询应用于所有媒体类型时,会省略all
。后面的 and
也是可选的。使用简写语法重新编写媒体查询
简写语法
@media (min-width:800px) { ... }
复杂表达式
创建一个仅在最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式@media (min-width:800px) and (max-width:1200px) { ... }
and 条件
在您的表达式中,您可以根据自己的喜好使用任意数量的 and 条件。如果您想要增加其他条件来检查特定的屏幕方向,只需添加另一个 and 关键词,后跟 orientation 媒体查询.@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
仅在宽度为 800 到 1200 像素且方向是纵向时才能激活.
or 关键词
and 关键词的反义词是 or 关键词。和 and 一样,这些条件组合在一起会构成复杂表达式。如果其中有一个条件为 True,那么整个表达式或分离的两个条件都会为 True,如清单 6 所示。@media (min-width:800px) or (orientation:portrait) { ... }
如果宽度至少是 800 像素或方向是纵向的,则会应用该规则。
使用 not
@media not all and (min-width: 800px) { ... }
@media not (all and (min-width: 800px)) { ... }
当最小宽度不是 800 像素时,会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位,但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位,比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。
only
@media only (min-width: 300px) { ... }
有用的媒体特性
orientation 媒体查询
方向: orientation
值为:横排方向( landscape
)竖排方向(portrait
)@media (orientation: portrait) { ... }
高度和宽度行为十分相似,都支持以 min- 和 max- 为前缀
高度和宽度媒体查询
@media (min-width:800px) and (min-height:400px) { ... }
不带 min- 和 max- 前缀
@media (width:800px) and (height:400px) { ... }
媒体属性特征
1 | 前缀`min-`表示“至少”,即“大于等于”的意思。 |
1 | width: 视口宽度 |