CSS媒体查询新增的特性怎么使用

CSS媒体查询（Media Queries）是CSS3中引入的一种强大工具，允许开发者根据设备的特性（如屏幕宽度、高度、分辨率、方向等）来应用不同的样式。随着Web技术的不断发展，CSS媒体查询也在不断进化，新增了许多特性，使得开发者能够更精确地控制网页在不同设备上的表现。本文将详细介绍CSS媒体查询新增的特性及其使用方法。

1. 媒体查询基础

在深入探讨新增特性之前，我们先回顾一下媒体查询的基础知识。媒体查询的基本语法如下：

@media media-type and (media-feature) {
  /* CSS rules */
}

• media-type：指定媒体类型，如screen、print、speech等。
• media-feature：指定媒体特性，如width、height、orientation等。

例如，以下媒体查询会在屏幕宽度小于600px时应用样式：

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

2. 新增的媒体特性

随着CSS的不断更新，媒体查询新增了许多特性，使得开发者能够更精确地控制网页在不同设备上的表现。以下是一些新增的媒体特性及其使用方法。

2.1 prefers-color-scheme

prefers-color-scheme媒体特性用于检测用户是否偏好浅色或深色主题。这对于实现暗黑模式非常有用。

@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

2.2 prefers-reduced-motion

prefers-reduced-motion媒体特性用于检测用户是否偏好减少动画效果。这对于提高可访问性非常重要。

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
  }
}

2.3 prefers-contrast

prefers-contrast媒体特性用于检测用户是否偏好高对比度或低对比度的界面。

@media (prefers-contrast: high) {
  body {
    background-color: black;
    color: white;
  }
}

@media (prefers-contrast: low) {
  body {
    background-color: lightgray;
    color: darkgray;
  }
}

2.4 prefers-reduced-transparency

prefers-reduced-transparency媒体特性用于检测用户是否偏好减少透明效果。

@media (prefers-reduced-transparency: reduce) {
  .transparent-element {
    opacity: 1;
  }
}

2.5 inverted-colors

inverted-colors媒体特性用于检测用户是否启用了颜色反转。

@media (inverted-colors: inverted) {
  body {
    filter: invert(100%);
  }
}

2.6 pointer

pointer媒体特性用于检测用户的主要输入设备是鼠标、触摸屏还是其他设备。

@media (pointer: fine) {
  /* 适用于鼠标等精确指针设备 */
  .button {
    padding: 10px;
  }
}

@media (pointer: coarse) {
  /* 适用于触摸屏等粗指针设备 */
  .button {
    padding: 20px;
  }
}

2.7 hover

hover媒体特性用于检测用户的主要输入设备是否支持悬停操作。

@media (hover: hover) {
  /* 适用于支持悬停操作的设备 */
  .button:hover {
    background-color: blue;
  }
}

@media (hover: none) {
  /* 适用于不支持悬停操作的设备 */
  .button {
    background-color: blue;
  }
}

2.8 any-pointer 和 any-hover

any-pointer和any-hover媒体特性与pointer和hover类似，但它们检测的是所有可用的输入设备，而不仅仅是主要输入设备。

@media (any-pointer: fine) {
  /* 适用于任何精确指针设备 */
  .button {
    padding: 10px;
  }
}

@media (any-hover: hover) {
  /* 适用于任何支持悬停操作的设备 */
  .button:hover {
    background-color: blue;
  }
}

2.9 aspect-ratio

aspect-ratio媒体特性用于检测设备的宽高比。

@media (aspect-ratio: 16/9) {
  /* 适用于宽高比为16:9的设备 */
  .video-container {
    width: 100%;
    height: 56.25%; /* 16:9 aspect ratio */
  }
}

2.10 orientation

orientation媒体特性用于检测设备的方向（横向或纵向）。

@media (orientation: portrait) {
  /* 适用于纵向设备 */
  .header {
    height: 100px;
  }
}

@media (orientation: landscape) {
  /* 适用于横向设备 */
  .header {
    height: 50px;
  }
}

2.11 resolution

resolution媒体特性用于检测设备的分辨率。

@media (resolution: 2dppx) {
  /* 适用于分辨率为2dppx的设备 */
  .image {
    background-image: url('image@2x.png');
  }
}

2.12 update

update媒体特性用于检测设备的更新频率。

@media (update: slow) {
  /* 适用于更新频率较慢的设备 */
  .animation {
    animation-duration: 2s;
  }
}

@media (update: fast) {
  /* 适用于更新频率较快的设备 */
  .animation {
    animation-duration: 0.5s;
  }
}

2.13 scripting

scripting媒体特性用于检测设备是否支持JavaScript。

@media (scripting: none) {
  /* 适用于不支持JavaScript的设备 */
  .no-script {
    display: block;
  }
}

@media (scripting: enabled) {
  /* 适用于支持JavaScript的设备 */
  .no-script {
    display: none;
  }
}

2.14 overflow-block 和 overflow-inline

overflow-block和overflow-inline媒体特性用于检测设备在块级和内联方向上的溢出行为。

@media (overflow-block: scroll) {
  /* 适用于块级方向支持滚动的设备 */
  .container {
    overflow-y: scroll;
  }
}

@media (overflow-inline: scroll) {
  /* 适用于内联方向支持滚动的设备 */
  .container {
    overflow-x: scroll;
  }
}

2.15 color-gamut

color-gamut媒体特性用于检测设备的色域范围。

@media (color-gamut: srgb) {
  /* 适用于sRGB色域的设备 */
  .image {
    background-image: url('image-srgb.jpg');
  }
}

@media (color-gamut: p3) {
  /* 适用于P3色域的设备 */
  .image {
    background-image: url('image-p3.jpg');
  }
}

2.16 dynamic-range

dynamic-range媒体特性用于检测设备的动态范围。

@media (dynamic-range: high) {
  /* 适用于高动态范围的设备 */
  .video {
    background-image: url('video-hdr.mp4');
  }
}

@media (dynamic-range: standard) {
  /* 适用于标准动态范围的设备 */
  .video {
    background-image: url('video-sdr.mp4');
  }
}

2.17 video-dynamic-range

video-dynamic-range媒体特性用于检测视频的动态范围。

@media (video-dynamic-range: high) {
  /* 适用于高动态范围的视频 */
  .video {
    background-image: url('video-hdr.mp4');
  }
}

@media (video-dynamic-range: standard) {
  /* 适用于标准动态范围的视频 */
  .video {
    background-image: url('video-sdr.mp4');
  }
}

2.18 video-color-gamut

video-color-gamut媒体特性用于检测视频的色域范围。

@media (video-color-gamut: srgb) {
  /* 适用于sRGB色域的视频 */
  .video {
    background-image: url('video-srgb.mp4');
  }
}

@media (video-color-gamut: p3) {
  /* 适用于P3色域的视频 */
  .video {
    background-image: url('video-p3.mp4');
  }
}

2.19 video-width 和 video-height

video-width和video-height媒体特性用于检测视频的宽度和高度。

@media (video-width: 1920px) {
  /* 适用于宽度为1920px的视频 */
  .video {
    width: 100%;
  }
}

@media (video-height: 1080px) {
  /* 适用于高度为1080px的视频 */
  .video {
    height: 100%;
  }
}

2.20 video-resolution

video-resolution媒体特性用于检测视频的分辨率。

@media (video-resolution: 2dppx) {
  /* 适用于分辨率为2dppx的视频 */
  .video {
    background-image: url('video@2x.mp4');
  }
}

3. 组合使用媒体查询

媒体查询可以组合使用，以实现更复杂的条件判断。例如，以下媒体查询会在屏幕宽度小于600px且用户偏好深色主题时应用样式：

@media screen and (max-width: 600px) and (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

4. 使用@supports与媒体查询结合

@supports规则用于检测浏览器是否支持某个CSS特性。我们可以将@supports与媒体查询结合使用，以实现更精细的控制。

@media screen and (max-width: 600px) {
  @supports (display: grid) {
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }
}

5. 使用min-width和max-width

min-width和max-width是最常用的媒体特性之一，用于根据屏幕宽度应用不同的样式。

@media (min-width: 600px) and (max-width: 900px) {
  /* 适用于屏幕宽度在600px到900px之间的设备 */
  .container {
    width: 80%;
  }
}

6. 使用min-height和max-height

min-height和max-height用于根据屏幕高度应用不同的样式。

@media (min-height: 600px) and (max-height: 900px) {
  /* 适用于屏幕高度在600px到900px之间的设备 */
  .container {
    height: 80%;
  }
}

7. 使用min-aspect-ratio和max-aspect-ratio

min-aspect-ratio和max-aspect-ratio用于根据设备的宽高比应用不同的样式。

@media (min-aspect-ratio: 16/9) and (max-aspect-ratio: 21/9) {
  /* 适用于宽高比在16:9到21:9之间的设备 */
  .video-container {
    width: 100%;
    height: 56.25%; /* 16:9 aspect ratio */
  }
}

8. 使用min-resolution和max-resolution

min-resolution和max-resolution用于根据设备的分辨率应用不同的样式。

@media (min-resolution: 2dppx) and (max-resolution: 3dppx) {
  /* 适用于分辨率在2dppx到3dppx之间的设备 */
  .image {
    background-image: url('image@2x.png');
  }
}

9. 使用min-color-gamut和max-color-gamut

min-color-gamut和max-color-gamut用于根据设备的色域范围应用不同的样式。

@media (min-color-gamut: srgb) and (max-color-gamut: p3) {
  /* 适用于色域范围在sRGB到P3之间的设备 */
  .image {
    background-image: url('image-srgb.jpg');
  }
}

10. 使用min-dynamic-range和max-dynamic-range

min-dynamic-range和max-dynamic-range用于根据设备的动态范围应用不同的样式。

@media (min-dynamic-range: standard) and (max-dynamic-range: high) {
  /* 适用于动态范围在标准到高之间的设备 */
  .video {
    background-image: url('video-sdr.mp4');
  }
}

11. 使用min-video-dynamic-range和max-video-dynamic-range

min-video-dynamic-range和max-video-dynamic-range用于根据视频的动态范围应用不同的样式。

@media (min-video-dynamic-range: standard) and (max-video-dynamic-range: high) {
  /* 适用于视频动态范围在标准到高之间的设备 */
  .video {
    background-image: url('video-sdr.mp4');
  }
}

12. 使用min-video-color-gamut和max-video-color-gamut

min-video-color-gamut和max-video-color-gamut用于根据视频的色域范围应用不同的样式。

@media (min-video-color-gamut: srgb) and (max-video-color-gamut: p3) {
  /* 适用于视频色域范围在sRGB到P3之间的设备 */
  .video {
    background-image: url('video-srgb.mp4');
  }
}

13. 使用min-video-width和max-video-width

min-video-width和max-video-width用于根据视频的宽度应用不同的样式。

@media (min-video-width: 1920px) and (max-video-width: 3840px) {
  /* 适用于视频宽度在1920px到3840px之间的设备 */
  .video {
    width: 100%;
  }
}

14. 使用min-video-height和max-video-height

min-video-height和max-video-height用于根据视频的高度应用不同的样式。

@media (min-video-height: 1080px) and (max-video-height: 2160px) {
  /* 适用于视频高度在1080px到2160px之间的设备 */
  .video {
    height: 100%;
  }
}

15. 使用min-video-resolution和max-video-resolution

min-video-resolution和max-video-resolution用于根据视频的分辨率应用不同的样式。

@media (min-video-resolution: 2dppx) and (max-video-resolution: 3dppx) {
  /* 适用于视频分辨率在2dppx到3dppx之间的设备 */
  .video {
    background-image: url('video@2x.mp4');
  }
}

16. 使用not关键字

not关键字用于否定媒体查询的条件。

@media not (prefers-color-scheme: dark) {
  /* 适用于用户不偏好深色主题的设备 */
  body {
    background-color: white;
    color: black;
  }
}

17. 使用only关键字

only关键字用于确保媒体查询仅在特定条件下生效。

@media only screen and (max-width: 600px) {
  /* 仅适用于屏幕宽度小于600px的设备 */
  body {
    background-color: lightblue;
  }
}

18. 使用and关键字

and关键字用于组合多个媒体查询条件。

@media screen and (max-width: 600px) and (orientation: portrait) {
  /* 适用于屏幕宽度小于600px且方向为纵向的设备 */
  body {
    background-color: lightblue;
  }
}

19. 使用or关键字

or关键字用于组合多个媒体查询条件，只要其中一个条件满足即可。

@media screen and (max-width: 600px), screen and (orientation: portrait) {
  /* 适用于屏幕宽度小于600px或方向为纵向的设备 */
  body {
    background-color: lightblue;
  }
}

20. 使用all关键字

all关键字用于指定所有媒体类型。

@media all and (max-width: 600px) {
  /* 适用于所有媒体类型且屏幕宽度小于600px的设备 */
  body {
    background-color: lightblue;
  }
}

21. 使用print媒体类型

print媒体类型用于指定打印时的样式。

@media print {
  /* 适用于打印时的样式 */
  body {
    background-color: white;
    color: black;
  }
}

22. 使用speech媒体类型

speech媒体类型用于指定屏幕阅读器时的样式。

@media speech {
  /* 适用于屏幕阅读器时的样式 */
  body {
    background-color: white;
    color: black;
  }
}

23. 使用screen媒体类型

screen媒体类型用于指定屏幕显示时的样式。

@media screen {
  /* 适用于屏幕显示时的样式 */
  body {
    background-color: white;
    color: black;
  }
}

24. 使用tv媒体类型

tv媒体类型用于指定电视显示时的样式。

@media tv {
  /* 适用于电视显示时的样式 */
  body {
    background-color: black;
    color: white;
  }
}

25. 使用projection媒体类型

projection媒体类型用于指定投影显示时的样式。

@media projection {
  /* 适用于投影显示时的样式 */
  body {
    background-color: black;
    color: white;
  }
}

26. 使用handheld媒体类型

handheld媒体类型用于指定手持设备显示时的样式。

”`css @media handheld { /*