CSS 媒体查询 @media【详解】

CSS 媒体查询的用途

通过CSS媒体查询，可以根据媒体特征使用对应的最佳样式，来实现不同设备的响应式自适配。

/* 设定在宽度为320px～480px，分辨率是150dpi的设备上行高为 1.4 */
@media only screen 
    and (min-width: 320px) 
    and (max-width: 480px)
    and (resolution: 150dpi) {
        body { line-height: 1.4; }
}

CSS 媒体查询的语法

@media 媒体类型 媒体特征表达式{
}

媒体类型

• all 【默认值】 匹配所有设备，无论是打印设备还是其他普通的现实设备。
• screen 除打印设备和屏幕阅读设备以外的所有设备
• speech 能够“读出”页面的屏幕阅读设备，通常供残疾人士使用
• print 在打印和打印预览的时候生效

使用逗号同时指定多个媒体类型

@media screen, print { ... }

实用范例：打印时，隐藏页面的头部和尾部

@media print {
    header, footer {
        display: none;
    }
}

媒体特征

常用媒体特征有：

设备像素比 resolution

/* 设备像素比等于2 */
@media (resolution: 2dppx) { ... }

/* 设备像素比不小于2 */
@media (min-resolution: 2dppx) { ... }

/* 设备像素比不大于2 */
@media (max-resolution: 2dppx) { ... }

判断设备是横屏还是竖屏 orientation

/* 横屏 */ 
@media (orientation: landscape) {} 
/* 竖屏 */ 
@media (orientation: portrait) {}

设备高度的查询与匹配 height、min-height、max-height

/* iPhone X高度 */ 
@media (height: 812px) {}
/* 如果高度小于600px */ 
@media (max-height: 600px) {}

设备宽度的查询与匹配 width、min-width、max-width

@media (max-height: 480px) {}

判断深色模式 prefers-color-scheme

• no-preference表示系统没有告知用户使用的颜色方案。
• light表示系统倾向于使用浅色模式。
• dark表示系统倾向于使用深色模式。

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    body { background: #333; color: white; }
}
/* 浅色模式 */
@media (prefers-color-scheme: light) {
    body { background: white; color: #333; }
}

js判断深浅模式

// 是否支持深色模式，返回true或false
window.matchMedia("(prefers-color-scheme: dark)").matches;

经典范例——对现有网页快速进行深色模式改造的技巧

@media (prefers-color-scheme: dark) {
    body { 
        filter: invert(1) hue-rotate(180deg);
        background-color: #000;
    }
    img {
        filter: invert(1) hue-rotate(180deg);
    }
}

对浅色模式、文字颜色和背景色等直接使用滤镜进行反相，自然就变成深色模式了，无须逐个对颜色进行重置，一行简单的filter:invert(1)就可以搞定。不过对于图片元素，如果进行反相操作，效果会很奇怪。此时，可以再次反相，将图片还原成真实颜色。

效果和完整代码见 https://demo.cssworld.cn/new/7/1-1.php

filter:invert(1)这种“偷懒”的技巧只适合用于不太重要的页面。

filter滤镜在Safari浏览器中会带来潜在的渲染问题。

判断是否关闭不必要的动画 prefers-reduced-motion

• no-preference表示用户没有通知系统任何首选项。
• reduced表示用户已通知系统，他们更喜欢删除或者替换基于运动的动画，因为该类型动画会引发前庭功能紊乱患者的不适（类似晕车），或者一部分人就是单纯动画疲劳，也可能想要更省电。

@media (prefers-reduced-motion) {
    * {
        animation: none;
        transition: none;
    }
}

判断是否能悬停 any-hover、hover

测试是否有任意可用的输入装置可以悬停（就是hover行为）在元素上。例如，鼠标这个输入装置就可以控制鼠标指针的位置，以及悬停在元素上。

• none表示没有输入装置可以实现悬停效果，或者没有可以实现指向的输入装置。
• hover表示一个或多个输入装置可以触发元素的悬停交互效果。

figcaption {
    display: none;
}
figure:hover figcaption {
    display: block;
}
@media (any-hover: none) {
    figcaption {
        display: block;
    }
}

效果和完整代码见 https://demo.cssworld.cn/new/7/1-2.php

hover 的语法和作用与any-hover是一样的，两者的主要区别在于，any-hover检测任意输入装置，而hover只检测主要的输入装置。

• none表示主输入装置根本无法悬停或无法方便地悬停（例如，使用长点击来模拟悬停，而长点击这种交互并不方便），或者没有主输入装置。
• hover表示主输入装置可以触发元素的悬停交互。

figcaption {
    display: none;
}
figure:hover figcaption {
    display: block;
}
@media (hover: none) {
    figcaption {
        display: block;
    }
}

判断是否可点击 any-pointer、pointer

• none表示没有可用的点击设备。
• coarse表示至少有一个设备的点击不是很精确。例如，使用手指操作手机就属于点击不精确。
• fine表示有点击很精准的设备。例如，用鼠标操作的计算机浏览器。

pointer 的语法和作用与 any-pointer 是一样的，两者的主要区别在于 any-pointer 检测任意输入装置，而 pointer 只检测主要的输入装置。

• none表示主输入装置点击不可用。
• coarse表示主输入装置点击不精确。
• fine表示主输入装置点击很精准。

@media (pointer: coarse) {
    input[type="checkbox"] {
        width: 30px;
        height: 30px;
    }
}

效果和代码见 https://demo.cssworld.cn/new/7/1-3.php

在可以使用鼠标的浏览器中复选框是原始的大小；而在没有连接鼠标的平板电脑上访问，复选框就会被放大，手指就很容易选中复选框。

媒体特征表达式

媒体特征配合上或 or、且 and、非 not 即媒体特征表达式。

/* 如果设备更新频率慢，或者不支持鼠标行为 */
@media (update: slow) or (hover: none) {}

匹配规则

从后向前匹配，一旦匹配成功则终止

/* 规则1 */  
@media (min-width: 320px) {  
  html { background: red; }  
}  

/* 规则2 */  
@media (min-width: 800px) {  
  html { background: green; }  
}  

/* 规则3 */  
@media (min-width: 1024px) {  
  html { background: blue; }  
}

1000px的设备背景色为 green

/* 规则1 */  
@media (min-width: 1024px) {  
  html { background: blue; }  
}  

/* 规则2 */  
@media (min-width: 800px) {  
  html { background: green; }  
}  

/* 规则3 */  
@media (min-width: 320px) {  
  html { background: red; }  
}

1000px的设备背景色为 red

匹配策略 —— 移动优先【推荐】

使用min-width匹配页面宽度，首先考虑的是移动设备使用场景，（默认）查询的是最窄的情况，再依次考虑设备屏幕逐渐变宽。

/* 当设备宽度还不足320px的移动设备情况 */  
html {  

}  

/* 宽度为320px至1024时 */  
@media (min-width: 320px;) {  

}  

/* 宽度大于1024px至无穷时 */  
@media (min-width: 1024px) {  

}

匹配策略 —— 桌面优先

采用max-width判断页面宽度的匹配情况。首先考虑在一般桌面显示器上的效果，再依次递减宽度，考虑更窄设备上的场景。

移动优先具有优势，但大部分项目因为历史或者成本原因无法重构页面。所以只能采用桌面优先，在桌面样式基础上进行降级处理。