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判断页面宽度的匹配情况。首先考虑在一般桌面显示器上的效果，再依次递减宽度，考虑更窄设备上的场景。
移动优先具有优势，但大部分项目因为历史或者成本原因无法重构页面。所以只能采用桌面优先，在桌面样式基础上进行降级处理。
