【CSS】关于媒体查询media那些事儿

前言

当我们想要根据设备的类型（如打印设备print与带屏幕的设备screen）、媒体特性或设备参数（如屏幕分辨率和浏览器viewport宽度）来修改网站或应用程序时

媒体查询就显得非常实用。

如何使用

关于媒体查询其实有三个打开方式：

1. 用@media和@import这样的@规则作为条件引用CSS样式

   @media (max-width: 600px) { ... }
   

2. 在HTML元素里（比如<style>、<link>...）中使用media = xxx的形式指定特定的媒体类型

   <link rel="stylesheet" src="style1.css" media="screen" />
   <link rel="stylesheet" src="style2.css" media="max-width: 600px" />
   

3. 利用诸如Window.matchMedia() 和 MediaQueryList.addListener()的javascript脚本测试或操控媒体状态

   

在上诉三个打开方式中，我们发现虽然形式不一样，但是像max-width: 600px这样的语法句段是可以共用的，那今天就由CSS的@media作为切入点（也是我们更常见的应用媒体查询的方式）探索一下媒体查询的魅力。

语法

从MDN网站我们可以找到这条描述：

每条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式构成。可以使用多种逻辑操作符合并多条媒体查询语句。媒体查询语句不区分大小写。

那我们就从媒体类型、媒体特性表达式、逻辑操作符的顺序开始。

媒体类型

媒体类型描述了设备的类别，可能希望创建针对特殊设备，例如打印机或屏幕

@media print { ... }
@media screen { ... }

当然，你也可以使用all适用所有设备，也可以定位多个设备

@media all { ... }
@media screen, print { ... }

媒体特性

媒体功能描述了给定的用户代理的输出设备或环境的特定特征

以下为媒体特性的表格，任何一个特性的具体参数都可以在MDN网站搜得到

特性	简介
any-hover	是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上
hover	主输入机制是否允许用户在元素上悬停
any-pointer	是否有任何指针设备
pointer	主输入机制是否是指针设备
aspect-ratio	视口的宽高比
color	输出设备每个像素的比特值
color-gamut	用户代理和输出设备大致程度上支持的色域
color-index	输出设备的颜色查询表中条目数量
inverted-colors	用户代理或者底层操作系统是否反转了颜色
display-mode	应用程序的显示模式
dynamic-range	用户代理和输出设备支持的亮度、对比度和颜色深度的组合
forced-colors	检测用户代理是否限制调色板
grid	输出设备使用网格屏幕还是点阵屏幕
height	视口的高度
width	视口的宽度，包括纵向滚动条的宽度
monochrome	输出设备单色帧缓冲区中每个像素的位深度
orientation	视口的旋转方向
overflow-block	输出设备如何处理沿块轴溢出视口的内容
overflow-inline	沿内联轴溢出视口的内容是否可以滚动
prefers-color-scheme	检测用户倾向于选择亮色还是暗色的配色方案
prefers-contrast	检测用户是否有向系统要求提高或降低相近颜色之间的对比度
prefers-reduced-motion	用户是否希望页面上出现更少的动态效果
resolution	输出设备的像素密度（分辨率）
scripting	检测脚本（如 JavaScript）是否可用
update	输出设备修改渲染内容的频率
video-dynamic-range	用户代理的视频平面和输出设备支持的亮度、对比度及颜色深度的组合

以上很多关于数量的特性都可以加上min-或者-max表示其上限或者下限，例如前文的

@media (max-width: 600px) { ... }

指的就是：“输出设备中的页面最大可见区域宽度是600px”

即规定了一个width<=600px的情况对应的CSS样式。

在媒体查询 4 级规范中，你也可以用比较符号来优化这一表示方式

@media (min-width: 30em) and (max-width: 50em) { ... }
/* 也可以表示为 */
@media (30em <= width <= 50em ) { ... }

逻辑操作符

总的来说就是利用四个符号，规定更加复杂的媒体查询结构

• and

  “并” ，学计算机的懂得都懂，需要每个查询规则都为真才得到true

• or

  “或” ，也是懂得都懂，相当于逗号 " , " ，一个查询规则为真则得到true

  /* 举个 and 和 or 的例子*/
  @media (max-height: 600px) or screen and (aspect-ratio: 11/5) {...}
  

• only

  他的发明是为了防止旧浏览器会将 screen and (max-width: 600px) 简单地解释为 screen，而忽略查询的其余部分，是一种兼容性提升

• not

  非，反转整个媒体查询的含义，也可以否定一个特性

  @media not all { ... }
  @media not(max-width: 600px) { ... }
  

  注意：

  @media not all and (max-width: 600px) { ... }
  

  相当于（整个）：

  @media not ( all and (max-width: 600px) ){ ... }
  

无障碍考虑

em和 px都是有效单位，但如果用户更改浏览器文本大小，em的效果会更好。

考虑使用 媒体查询 4 级规范来改善用户体验。例如，使用 prefers-reduced-motion 以检测用户是否已请求系统最小化其使用的动画或动作。

参考文献

MDN中文文档：developer.mozilla.org/zh-CN/