媒体查询应通过and、not、only组合媒体类型与特征来精准匹配真实屏幕行为，而非依赖设备型号；and用于联合宽度与方向等条件，not用于排除特定特性（如非高分屏），only用于避免旧浏览器误解析，还可叠加深色模式等偏好实现多维匹配。
媒体查询组合多个条件，核心是用 and、not、only 连接媒体类型与媒体特征，不是靠猜设备型号，而是按真实屏幕行为做判断。
用 and 组合宽度与方向，适配横竖屏场景
单看宽度容易误判——比如 iPad 竖屏宽 768px，横屏却变成 1024px。只写 @media (max-width: 768px) 会把横屏 iPad 当成手机处理。正确做法是同时限定宽度和方向：
-
@media screen and (min-width: 768px) and (orientation: landscape)→ 专用于平板横屏 -
@media screen and (max-width: 480px) and (orientation: portrait)→ 锁定小屏手机竖屏
用 not 排除特定设备特性，避免样式冲突
有些样式只在非高分屏下生效，比如普通图标尺寸；高分屏（dpr ≥ 2）需用 @2x 图或 SVG。这时可用 not 主动排除：
-
@media screen and (not (-webkit-min-device-pixel-ratio: 2))→ 仅对非 Retina 屏应用基础图标尺寸 -
@media not print→ 所有非打印场景都适用该规则（常用于隐藏打印专用元素）
用 only 防止旧浏览器误读，提升兼容性
早期浏览器（如 IE8 及更早）会把 @media screen and (min-width: 768px) 里的 screen 当作媒体类型，忽略括号内条件，导致样式全部加载。加 only 可让老浏览器直接跳过整条规则：
-
@media only screen and (min-width: 768px)→ 现代浏览器正常解析，IE8 及以下完全无视 - 实际项目中建议统一加上
only，尤其当使用min-width/max-width等现代特性时
组合断点与深色模式，实现多维匹配
现代终端不止看尺寸，还看系统偏好。比如：桌面端用户开启深色模式，又希望大字号——可三层叠加：
@media screen and (min-width: 1200px) and (prefers-color-scheme: dark) and (prefers-reduced-motion: no-preference)- 这种写法能精准命中“大屏+深色+动画正常”的用户，比单独写
@media (prefers-color-scheme: dark)更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
