媒体查询Media Query

媒体查询允许开发者测试和查询用户代理或设备设置的属性,依据不同的匹配条件改变外观展示或者行为。媒体查询最常见的应用在于响应式设计上。

使用

在CSS中使用媒体查询

css中使用@media at-rule 来根据查询条件应用相应的样式

@media screen and (max-width: 1200px) {
  .layout {
    padding: 10px;
  }
}

在HTML中使用媒体查询

应用在link标签

<link rel="stylesheet" type="text/css" href="a.css" media="screen" />
<link rel="stylesheet" type="text/css" href="b.css" media="print" />

style标签

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

source标签上使用

<picture>
  <!-- 屏幕至少是800像素宽使用该图 -->
  <source srcset="cat-landscape.png" media="(min-width: 800px)">
  <!-- 屏幕至少是600像素宽使用该图 -->
  <source srcset="cat-cropped.png" media="(min-width: 600px)">

  <!-- 如果以上条件不满足,使用cat.png -->
  <img src="cat.png" alt="A calico cat with dark aviator sunglasses.">
</picture>

在JavaScript中使用媒体查询

可以用Window.matchMedia()方法测试窗口

let mediaQuery = window.matchMedia('(max-width: 600px)');
mediaQuery.matches // 小于等于600时返回true

使用MediaQueryList.addListener()在查询状态发生变化时收到通知。

mediaQuery.addListener(function(e) {
  if (e.matches) { 
    // ... 
  } else {
    // ...
  }
})

媒体查询

媒体查询语法包含一个可选的媒体查询修饰符,一个可选的媒体类型,0或多个媒体属性

把一条媒体查询拆看看,大概是由这些部分组成:

at-rule

@media规则可以位于顶层,或者其他at-rule之内

@supports (display: flex) {
  @media screen and (min-width: 600px) {
    article { display: flex; }
  }
}

媒体类型

all 匹配所有设备
print 打印预览文档,打印页
screen 匹配所有非print的设备

媒体特性

媒体特性大致分为这几类:

视窗/页面尺寸

  1. width 设备显示区域宽度
  2. height 设备展示区域高度
  3. aspect-ratio 宽高比例
  4. orientation 设备方向,有两个值:portrait表示高度大于宽度,通常用于匹配“竖屏”,landscape和前面的相反,通常用于匹配“横屏”

显示品质

  1. resolution 输出设备的像素密度
  2. scan 输出设备的扫描过程,值有interlaceprogressive
  3. grid 判断设备使用网格(1)或位图(0)屏幕(level 5)
  4. update 输出设备更新内容渲染结果的频率,值有none slowfast
  5. overflow-block 描述设备在块轴方向发生内容溢出时如何处理,值有none不展示(例如户外广告展示屏),scroll滚动(例如电脑屏幕),paged分页(例如打印设备,电子书阅读器等)
  6. overflow-inline 沿内联轴内容溢出时是否滚动scrollnone

颜色

  1. color 输出设备每个色彩组件的像素值,为0表示不支持彩色显示
  2. color-index 输出设备颜色查询表中的条目数量
  3. monochrome 输出设备单色帧缓冲区每个像素的位深度,非黑白屏为0
  4. color-gamut 输出设备大致的色彩范围,srgb p3 rec2020
  5. dynamic-range
  6. inverted-colors 浏览器或操作系统是否设置为翻转颜色,值为invertednone(level 5)

交互

  1. pointer 检测主要输入设备是否有指针设备(例如鼠标)以及其精度,值有none无指针设备 coarse不那么准确 fine准确
  2. hover 主要输入模式是否允许用户在元素上悬停,hover(例如鼠标和手柄) none(例如触屏设备)
  3. any-pointer 检测设备是否使用了指针(例如鼠标)和它的准确性,值有none fine coarse

和pointer区别是pointer只检测主要的输入设备,any-pointer检测任意输入设备

  1. any-hover 检查设备是否能像使用鼠标或手写笔一样悬停元素,值有hovernone

用户偏好设置(level 5)

  1. prefers-reduced-motion 用户系统是否设置为减少页面动画
  2. prefers-reduced-transparency 用户系统是否设置为阻止跨元素透明
  3. prefers-contrast 用户系统是否设置为减少或增加颜色对比度
  4. prefers-color-scheme 色彩方案使用dark深色模式还是light浅色模式
  5. forced-colors 浏览器是否限制可使用的颜色
  6. prefers-reduced-data 用户是否喜欢使用较少的数据呈现页面

不推荐使用

device-aspect-ratio, device-height, device-width

运算符

and

@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* Styles! */
  }
}

or 使用逗号分割作为or运算符匹配

@media screen (prefers-color-scheme: dark), (min-width 1200px) {
  .element {
    /* Styles! */
  }
}

not

@media print and ( not(color) ) {
  body {
    background-color: none;
  }
}

参考:
A Complete Guide to CSS Media Queries | CSS-Tricks