精准匹配手机需结合设备能力而非仅宽度：用(max-width: 767px) and (pointer: coarse)排除平板与鼠标设备；prefers-color-scheme比JS切换更可靠，需设默认浅色样式并同步调整背景/边框；orientation易失效，应配合JS监听防抖；prefers-contrast和color-gamut关乎可访问性，print媒体查询防打印墨耗。
怎么用 @media 精准匹配手机屏幕
不能只靠 max-width: 768px —— 它会把平板也框进去，导致本该给手机的样式错配到 iPad 上。真正“针对手机”，得结合设备能力特征，而不是单纯看宽度。
-
@media screen and (max-width: 480px)：适用于老式小屏手机（如 iPhone SE 第一代），但漏掉大部分现代全面屏 -
@media screen and (max-width: 767px) and (pointer: coarse)：更靠谱——pointer: coarse表示触控精度低，基本可判定是手机或低端平板，排除鼠标设备 - 避免用
device-width：Safari 在 iOS 15+ 已废弃该特性，且在缩放/横竖屏切换时行为不稳定
为什么 prefers-color-scheme 比手动加 dark class 更可靠
用户系统级深色模式开启后，页面自动变黑不是“炫技”，而是读取系统信号的自然响应。硬写一个 isDarkMode 开关再 JS 切换，反而容易和系统脱节、触发闪屏。
- 直接用
@media (prefers-color-scheme: dark)，浏览器原生监听，无 JS 依赖，首屏即生效 - 注意 fallback：不支持该媒体查询的旧浏览器（如 IE、Android 4.4 WebView）会忽略整段规则，所以浅色样式必须写在媒体查询外作为默认
- 别在
@media (prefers-color-scheme: dark)里只改文字颜色——背景、边框、阴影全得同步调，否则对比度崩坏
横竖屏切换时调色要注意的两个坑
用 orientation: portrait 或 landscape 做样式分支很直观，但实际运行中容易失效或延迟。
- 部分安卓浏览器（尤其 Chrome 110–118）在折叠屏或分屏模式下，
orientation媒体查询不触发更新，得配合window.matchMedia监听 +resize事件兜底 - 不要只靠 orientation 改背景色——比如竖屏设黑底白字、横屏切回白底黑字，会导致用户旋转瞬间文字“消失”（白字落在白底上），应始终保证最小对比度
- 测试时别只用手动旋转：真机上快速翻转可能触发两次 resize，CSS 规则若没做防抖，会出现样式抖动
打印、暗光、宽色域场景下的颜色适配要不要加
要加，但得按优先级来。对手机用户来说，prefers-contrast 和 color-gamut 不是“锦上添花”，而是可访问性刚需。
立即学习“前端免费学习笔记（深入）”；
-
@media (prefers-contrast: high)在强日光下能救视力弱的用户——把灰色文字改成纯黑，按钮加粗边框，比“看起来高级”重要得多 -
@media (color-gamut: p3)对 iPhone 12+ / iPad Pro 用户有意义：用color(display-p3 ...)能让品牌蓝更饱和，但务必提供 sRGB fallback，否则安卓机显示发灰 - 别漏掉
@media print：虽然手机不常打印，但分享到微信/钉钉后“发送为 PDF”或“保存为网页”时，深色背景+白字会直接变成黑纸白墨，打印机狂吃墨
最常被跳过的其实是 pointer: coarse 和 prefers-contrast 的组合判断——它能同时筛出“手机 + 低视力用户”，这时候的调色逻辑就不再是“换个主题”，而是“确保每个按钮都带明确轮廓、文字至少 16px、行高不小于 1.5”。
