媒体查询

使用媒体查询

HTML 中使用

在 <head> 中的 <link> 元素，通过它来引用不同的 CSS 样式文件，并且通过 media 属性来指定媒体查询的条件

<head>
    <!-- 所有用户 -->
    <link rel="stylesheet" href="all.css" media="all" />

    <!-- 浏览器视窗宽度至少是20em，相当于 Mobile -->
    <link rel="stylesheet" href="small.css" media="(min-width: 20em)" />

    <!-- 浏览器视窗宽度至少是64em, 相当于 Tablet -->
    <link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />

    <!-- 浏览器视窗宽度小于是90em，相当于 Desktop -->
    <link rel="stylesheet" href="large.css" media="(min-width: 90em)" />

    <!-- 浏览器视窗宽度至少是 120em，超大屏幕，比如 TV -->
    <link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />

    <!-- 用于打印设备 -->
    <link rel="stylesheet" href="print.css" media="print" />
</head>

在 <picture> 的 <source> ，通过它来引用不同的图片资源，并且通过 media 属性来指定媒体查询的条件

<picture> 
    <source media="(max-width: 799px)" srcset="./elva-480w-close-portrait.jpeg"> 
    <source media="(min-width: 800px)" srcset="./elva-800w.jpeg"> 
    <img src="./elva-800w.jpeg" alt="Chris standing up holding his daughter Elva"> 
</picture>

在 <style> 元素设置 media 属性的值，用来指定媒体查询所需要匹配的条件

<style media="all and (max-width: 500px)">
    p {
        background-color: yellow;
        color: blue;
    }
</style>

CSS 中使用

使用 @media 查询规则

@media only screen and (min-width: 961px) {
    body {
        background-color: #b2d6ff;
    }
}

在样式表中使用 @import 引入 .css 文件，并在其后面紧跟媒体查询

@import "print.css" print; 
@import "mobile.css" (max-width: 320px);

JS 中使用

将媒体查询字符串传递给 matchMedia()，其会返回 MediaQueryList 对象，然后检查对象中 matches 属性，可判断Document 是否匹配媒体查询

通过MediaQueryList 对象的 addEventListener 方法可以监听 change，但媒体查询情况改变时，会触发方法

逻辑运算符

and：运算符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真（即 & 逻辑）

@media screen (width > 300px) and (height > 800px) {}

not：运算符用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 not 运算符，则还必须指定媒体类型。

@media not print {}

@media screen not (width > 300px) {}

, (逗号) ：逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为 true，则整个 media 语句均返回 true。即 | 逻辑，（or）运算符

比较操作符

Media Queries Level 4 规范中新增了操作符：

< ：计算一个值是否小于另一个值
> ：计算一个值是否大于另一个值
= ：计算一个值是否等于另一个值
>= ：计算一个值是否大于或等于另一个值
<= ：计算一个值是否小于或等于另一个值

老式查询方式：

@media (min-width: 375px) { 
    /* 视窗宽度大于或等于 375px */ 
}

@media (max-width: 768px) { 
    /* 视窗宽度小于或等于 768px */
}

@media (min-width: 375px) and (max-width: 768px) { 
    /* 视窗宽度在 375px ~ 768px 之间 */ 
}

使用新比较操作符（更易使用和理解）：

@media (width >= 375px) {
    /* 视窗宽度大于或等于 375px */ 
}

@media (width <= 768px) { 
    /* 视窗宽度小于或等于 768px */
}

@media (375px <= width <= 768px) { 
    /* 视窗宽度在 375px ~ 768px 之间 */ 
}

媒体特性 -- 视窗和页面媒体特性

width 和 height

可以使用 width 和 height 来查询终端设备上浏览器视窗的精确宽度或高度

orientation

portrait：竖屏，屏幕视窗高度大于宽度
landscape：横屏，屏幕视窗宽度大于高度

当视窗高度大宽度时，竖屏（portrait）就会触发
当视宽宽度大于高度，横屏（landscape）就会被触发

resolution

使用 resolution 媒体特性可以测试显示像素密度

在使用 resolution 时也可像 width 类似，添加 min- 和 max- 做前缀：

@media (min-resolution: 72dpi) { 
	p { 
		text-decoration: underline; 
	} 
}

另外还可以使用 x 来替代 dppx：

@media (min-resolution: 1x) { 
	body { 
		background-color: #f36; 
	} 
}

在旧浏览器还没有 resolution 媒体查询，但它有一个和该特性等同的私有特性，即 -webkit-device-pixel-ratio，它接受一个没有单位的数字：
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 1x) { 
	body { 
		background-color: #f36; 
	} 
}

color-gamut

srgb：sRGB 颜色空间是指由红、绿、蓝三组值表示，它们标识了 sRGB 颜色空间中的一个点
p3：它是现代 iPhone 所使用的，通常被称为“宽色域”（或“丰富色域”），指的是 Display-p3，Display-P3 颜色空间颜色要比 sRGB 颜色空间中的颜色更鲜艳，也可以说 Display-p3 是 sRGB 的一个超集，大约要大 35%
rec2020：这是目前可用的最大的色彩空间

p {
  color: rgb(255 0 0);
}

/* 支持p3（Display-p3）颜色空间 */
@media (color-gamut: p3) {
  p {
    color: color(display-p3 1 0 0); 
  }
}

hover

检测用户的主要输入机制是否能够悬停在元素上

none 检测主要输入机制不能悬停或不能方便地悬停，如大多数手机和平板电脑；
hover 检测主要输入机制能够悬停在元素上（例如，台式电脑、笔记本电脑和带有触控笔的智能手机）。

在某些需要悬停的才能显示重要信息的情况下：

但在手机端，不存在悬浮的能力，应该直接展示这些信息，所以将元素悬浮状态下的效果都放置在 @media (hover:hover) {} 媒体查询块中

@media (hover: hover) {
  .card:hover {
    animation: xxx;
  }
}

pointer + hover

不同设备类型对各种交互媒体特性的支持情况：

媒体特性	触摸屏幕	触摸屏幕+鼠标	台式机或笔记本电脑	台式机或笔记本电脑+触摸屏
`pointer:coarse`	✓	✓	✗	✗
`pointer:fine`	✗	✗	✓	✓
`hover:none`	✓	✓	✗	✗
`hover:hover`	✗	✗	✓	✓
`any-pointer:coarse`	✓	✓	✗	✓
`any-pointer:fine`	✗	✓	✓	✓
`any-hover:none`	✓	✗	✗	✗
`any-hover:hover`	✗	✓	✓	✓

比如要检测设备是带有鼠标、触控版的设备（如 Mac 电脑，iPad 等）

@media (hover: hover) and (pointer: fine) { }

媒体特性 -- 用户偏好设置

prefers-reduced-motion

使用 prefers-reduced-motion 媒体查询用于检测用户的系统是否被开启了动画减弱功能：

no-preference：用户未修改系统动画相关特性
reduce：这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除

可以在代码中加入一下css代码，实现设置动画减弱功能后（和设备性能差情况），快速播放动画

@media screen and (prefers-reduced-motion: reduce), (update: slow) { 
  * { 
    animation-duration: 0.001ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: 0.001ms !important; 
  } 
}

prefers-contrast prefers-contrast

检测用户是否要求系统增加或减少相邻颜色之间的对比度。比如一些喜欢阅读电子书的用户，在阅读与文本背景对比度相差不大的文本时会遇到困难，他们更喜欢较大的对比度，利于阅读：

no-preference：用户未向系统显式设置任何首选项。此关键字值在布尔上下文中计算为 false
high：用户更喜欢对比度较高的界面
low：用户更喜欢对比度较低的界面

prefers-reduced-transparency

用于检测用户是否要求系统最小化它所使用的透明或半透明层效果。换句话说，一些操作系统提供了减少系统使用透明或半透明分层效果的选项

no-preference：用户未向系统显式设置任何首选项
reduce：用户更喜欢最小化透明或半透明层效果的界面

.transparency { 
  opacity: 0.5; 
} 

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

prefers-color-scheme

检测用户是否打开了设备上 Dark Mode

forced-colors

检测用户代理是否启用了强制颜色模式

none：强制色彩模式不活跃，页面的颜色没有被限制在一个有限的调色板中
active：强制色彩模式已开启

.colors { 
    background-color: red; 
    color: grey; 
} 

@media (forced-colors: active) { 
  .colors { 
    background-color: white; 
    color: black; 
  } 
}

prefers-reduced-data

检测用户设备是否启用了低流量模式

none：没有开启低流量模式
reduce：开启

.image { 
    background-image: url("images/heavy.jpg"); 
} 

@media (prefers-reduced-data: reduce) { 
  .image { 
    background-image: url("images/light.avif"); 
  } 
}

light-level

可以根据用户是在白天还是晚上来调整 Web 页面或应用的样式：

dim：该设备是在昏暗的环境中使用的。在这种环境中，过高的对比度和亮度会分散读者的注意力或让用户阅读时眼睛不舒服
normal：该设备是在一个环境中使用的光水平在理想的范围内，这并不需要任何特定的调整
washed：该设备是在非常明亮的环境下使用的，导致屏幕被洗掉，难以阅读

媒体特性 -- 双屏幕和可折叠媒体

随着技术不断的发展，我们所面对的终端个性化越来越强，比如现在市场上已有或将有的双屏幕和可折叠屏幕设备

页面要具备这种跨越屏幕的能力，也要具备响应这种跨越的能力，以及还可能需要具备逻辑分隔内容的能力等

可以如下使用：

/* 有缝折叠 */
@media (spanning: single-fold-vertical) { 
  /* CSS Code... */
} 

/* 无缝折叠 */
@media (screen-fold-posture: laptop){ 
  /* CSS Code... */ 
} 

/* 折叠角度查询 */
@media (max-screen-fold-angle: 120deg) { 
  /* CSS Code... */
} 

/* 视口数量查询 */
@media (horizontal-viewport-segments: 2) { 
  /* CSS Code... */ 
}

@media (vertical-viewport-segments: 2) { 
  /* CSS Code... */
}