关于媒体查询，你可能不知道的一些事

完整用法

首先是媒体查询的完整用法：

1
2
3

@media [media-type] [and|not|only] (media-feature) [and|not|only] (media-feature) {
  /* CSS 规则 */
}

有几点容易被忽视：

逻辑运算符

媒体查询中可以用一些基本的逻辑运算符，像 and, not, only.
and 相当于 &&。可以用逗号分隔查询列表，这样做相当于 or：

1	<link rel="stylesheet" href="special-cases.css" media="(max-width: 600px), print">

media-type

媒体查询可以设置媒体类型，这对无障碍或者确保页面能正确打印时很有用。

all: 适用于所有设备 (默认值)。
print: 适用于打印预览模式或打印机。
screen: 适用于彩色电脑屏幕。
speech: 适用于屏幕阅读器等语音合成设备。

媒体特性 (Media Features)

下面只罗列一点点。媒体特性在处理水墨屏，触摸屏，无指针设置等等情况下能发挥奇效。

描述了用户代理（浏览器）、输出设备或环境的特定特性。每个媒体特性表达式都必须用括号括起来。

常见的媒体特性 (带 min- 或 max- 前缀的通常更常用):

宽度和高度:
- width: 视口的宽度。
- min-width: 视口的最小宽度。
- max-width: 视口的最大宽度。
- height: 视口的高度。
- min-height: 视口的最小高度。
- max-height: 视口的最大高度。
- device-width, min-device-width, max-device-width: 设备的渲染表面宽度 (已不推荐使用，优先使用 width)。
- device-height, min-device-height, max-device-height: 设备的渲染表面高度 (已不推荐使用，优先使用 height)。
方向 (Orientation):
- orientation: portrait: 视口高度大于或等于宽度。
- orientation: landscape: 视口宽度大于高度。
宽高比 (Aspect Ratio):
- aspect-ratio: 视口的宽度与高度之比 (例如 16/9)。
- min-aspect-ratio: 视口的最小宽高比。
- max-aspect-ratio: 视口的最大宽高比。
- device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio: 设备屏幕的宽高比 (已不推荐使用)。
分辨率 (Resolution):
- resolution: 输出设备的分辨率 (单位可以是 dpi - dots per inch, dpcm - dots per centimeter, dppx - dots per pixel unit)。
- min-resolution: 最小分辨率。
- max-resolution: 最大分辨率。

范围语法

范围语法在 Level 4 规范中引入，浏览器支持度越来越好：

@media (768px <= width < 1200px) {
  .container {
    background-color: lightgreen;
  }
}

@media (width < 600px) or (orientation: portrait) {
  /* 宽度小于600px 或者 是竖屏 */
  .main-content {
    padding: 10px;
  }
}

@media (resolution >= 300dpi) {
  /* 分辨率至少300dpi */
}

像是 (768px <= width < 992px) ，这是一个非常直观也十分现代化的范围写法，但是知道的人还挺少。

link 写法

我们不仅可以在 CSS 文件内部或 <style> 标签中使用 @media规则，还可以在 <link> 标签的 media 属性中指定媒体查询条件，从而决定是否加载和应用该外部 CSS 文件。
这种写法有一个优势：

浏览器只会下载和解析 media 属性条件匹配的 CSS 文件。这可以减少初始页面加载所需的资源，提升性能，尤其是在移动设备上，可以避免下载不必要的桌面端样式。

响应式处理桌面端和移动端

比如就可以通过这种方式实现桌面端和移动端用不同的 css：

1
2
3

<link rel="stylesheet" href="mobile-styles.css" media="screen and (max-width: 767px)">

<link rel="stylesheet" href="desktop-styles.css" media="screen and (min-width: 768px)">

响应式处理深色模式或者浅色模式

深色模式和浅色模式在现代前端开发中很常见。使用 link 写法，自动根据系统情况加载深色或者浅色模式的配色方案。

1 2	<link rel="stylesheet" href="dark-theme.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="light-theme.css" media="(prefers-color-scheme: light)">

对打印机进行优化

可以设置一些仅仅在打印时才加载的样式

1	<link rel="stylesheet" href="print-styles.css" media="print">

Leaves' blog