概括介绍了媒体功能可让您响应设备和偏好设置的所有方式。
如果没有媒体查询,自适应设计就无法实现。在进行媒体查询之前,我们无法知道用户是通过哪种设备访问您的网站。设计师必须做出假设。这些假设被编码到固定宽度的设计或流动布局中。
随着媒体查询的推出,这一切都已改变。设计师们首次有机会在一半的时间里与人们相见。设计师可以根据人们的设备来调整布局。
请注意,媒体查询包含可选的媒体类型和一项强制性的媒体功能。这些年来,媒体类型没有太大变化。仍然只有四个可能的值:
@media all
@media screen
@media print
@media speech
另一方面,媒体功能则得到极大扩展。设计师现在可以满足除一半以外的用户需求,调整设计以使其适应屏幕尺寸远不止于屏幕尺寸。
视口维度
到目前为止,网络上最热门的媒体查询都是处理视口宽度的。但即使您在这里,也可以做出选择。您可以使用 max-width
媒体功能应用特定宽度以下的样式,也可以使用 min-width
媒体功能应用超过特定宽度的样式。
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
就我个人而言,我喜欢使用 min-width
。我以累加的方式应用布局样式。我在每个断点处都引入了新的布局规则,而不是撤消之前的规则。
这种添加方法也适用于高度。使用 min-height
,随着视口高度的增加,您可以引入更多规则。例如,如果有足够的垂直空间,您可能希望将标题元素锚定到浏览器窗口顶部。
@media (min-height: 30em) {
header {
position: fixed;
}
}
不过,如果您愿意,也可以使用 max-height
媒体功能。在此例中,默认情况下,标题是锚定的,但如果没有足够的垂直空间,粘性会被移除。
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
在 min-
和 max-
前缀之间选择不仅适用于 width
和 height
。aspect-ratio
媒体功能提供相同的选择。如果您想以精确的宽高比应用样式,它还提供了一个无前缀的版本。
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
针对不同宽高比提供不同的样式可能很快就会失控。如果您不需要这种精细的控制,orientation
媒体功能可能更好地满足您的需求。它有两个可能的值:portrait
或 landscape
。
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
虽然“纵向”和“横向”这两个术语最常用来指代移动设备的屏幕方向,但 orientation
的媒体功能并非特定于设备。在典型笔记本电脑上,全屏浏览器窗口的 orientation
值为 landscape
。
显示屏
不同的显示屏具有不同的像素密度,以 dpi
为单位,每英寸的点数。您可以使用 resolution
媒体功能针对不同的像素密度调整样式。与 aspect-ratio
一样,resolution
有三个变体:最小、最大和精确。
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
您可能永远不需要使用任何 resolution
媒体查询。像素密度通常只是图片问题,而自适应图片可以直接在 HTML 中处理像素密度。
另一方面,CSS 是用于定义动画和转场效果的位置。您可以使用 update
媒体功能调整这些动画和过渡以响应不同的刷新频率。此媒体功能会报告以下三个值之一:none
、slow
和 fast
。
update
值为 none
表示没有刷新率。例如,已打印的页面无法更新。
update
值为 slow
表示显示屏无法快速刷新。电子墨水显示屏就是刷新率较低的屏幕的一个示例。
update
值为 fast
表示屏幕刷新速度足够快,能够处理动画和过渡。
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
并非显示屏的所有方面都与硬件功能相关。在关于主题设置的单元中,您学习了如何在 Web 应用清单文件中定义属性。其中一个属性称为 display
,您可为它指定值 fullscreen
、standalone
、minimum-ui
或 browser
。通过相应的 display-mode
媒体功能,您可以针对这些不同选项定制样式。
假设您在 Web 应用清单中将 display
值设为 standalone
。如果有人将您的网站添加到其主屏幕中,则该网站启动时将不会显示任何浏览器界面。您可以决定为这些用户显示返回按钮。
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
颜色
可用于查询设备颜色功能的媒体功能有很多。如果您想针对仅输出灰色阴影的任何显示屏调整样式,可以使用不带任何值的 monochrome
媒体功能。
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
有对应的 color
媒体功能。
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
对于彩色屏幕,您可以使用媒体功能 color-gamut
、color-index
或 dynamic-range
编写查询。所有这些控件都会报告有关屏幕颜色功能的具体详情。
在此示例中,颜色值会更新以响应 dynamic-range
媒体功能,该媒体功能会报告显示屏的最大亮度、色深和对比度。可能的值为 standard
或 high
。对于报告 dynamic-range
值为 high
的高清屏幕,使用新的 CSS color()
函数为其提供不同的颜色空间。
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
互动
媒体功能还可以报告用于与您的网站互动的输入机制类型:hover
、any-hover
、pointer
和 any-pointer
。如需了解详情,请参阅“交互”单元。
偏好设置
您可以通过一系列媒体查询来满足用户偏好:prefers-color-scheme
、prefers-contrast
和 prefers-reduced-motion
。如需了解详情,请参阅有关主题设置和无障碍功能的模块。
您可以在一个媒体查询中组合媒体功能。您可以限定动画样式的范围,以便仅在设备的刷新频率较快且用户未表现出对减少动作的偏好时应用这些样式。
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
更多媒体功能
我们还会推出更多媒体功能,敬请期待。
forced-colors
和 inverted-colors
媒体功能会报告设备使用的是受限调色板还是反色调色板。
借助 scripting
媒体功能,您可以根据 JavaScript 的可用性调整 CSS。
一项名为 prefers-reduced-data
的媒体功能允许用户指定自己使用的是按流量计费的网络,以便您可以发送较小的或更少的资源。
其他提案仍在制定中。在下一个单元(也是最后一个单元)中,您将了解针对可处理不同屏幕配置的媒体功能的相关提案。
检查您的掌握程度
测试您对媒体功能相关知识的掌握情况
媒体查询可以检查处于特定宽度的设备,例如 @media (width: 1024px)
。
1023px
和低于 1025px
的宽度来实现特定宽度。min-width
和 max-width
。媒体查询可以检查位于特定 aspect-ratio
的设备(如 @media (aspect-ratio: 4/3)
)吗?
aspect-ratio
可以选择此选项。哪些是有效的彩色媒体查询?
@media (color)
@media (monochrome)
@media (color-gamut: srgb)
@media (min-color-index: 15000)
@media (dynamic-range: high)
以下哪项用户偏好设置媒体查询是有效的?
@media (prefers-color-scheme: dark)
@media (prefers-colors: high-definition)
@media (prefers-reduced-motion: reduce)
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)