必须写成screen and (max-width: 767px)才能确保旧版safari等浏览器正确识别并仅在手机端加载css，否则可能降级为media="all"导致全设备加载。
media属性写成screen and (max-width: 767px)才真正只在手机端加载
直接写media="(max-width: 768px)"看似合理，但在旧版 Safari（如 iOS 12.1 之前）和部分 WebView 中会被完全忽略，降级为media="all"——结果是所有设备都下载该 CSS。必须显式带上媒体类型screen并用and连接，浏览器才按规范解析。
-
screen and (max-width: 767px)✅ 匹配绝大多数竖屏手机（含 iPhone SE、Android 中低端机型） -
screen and (max-width: 768px)❌ 在恰好 768px 宽的 iPad 竖屏下也会匹配，可能误加载 -
(max-width: 767px)❌ 缺少screen前缀，Safari 13.1 以下不识别 -
handheld已废弃，现代浏览器无视，不要用
如何避免桌面端也偷偷加载手机 CSS
常见错误是断点重叠或媒体查询条件太宽泛，导致多个 <link> 同时命中。比如 max-width: 768px 和 min-width: 768px 在视口正好 768px 时双双触发。
- 用
max-width: 767px和min-width: 768px显式断开交集 - 加
and (orientation: portrait)进一步限定，排除横屏平板误判 - 在 Chrome DevTools 的 Network 面板中刷新页面，筛选
css类型，确认只有目标文件出现——这才是真按需加载，不是“加载后隐藏” - 别依赖
@import拆分，它不阻止主文件下载，白费功夫
prefers-color-scheme 和手机端加载不是一回事
有人想用 media="(prefers-color-scheme: dark) and (max-width: 767px)" 同时筛设备+主题，这语法合法，但要注意：系统主题切换时，浏览器会动态加载/卸载对应 <link>，而屏幕宽度变化（比如横竖屏）不会触发重新加载——media 只在 HTML 解析阶段判断一次。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 手机端暗色模式样式建议单独用
media="(prefers-color-scheme: dark)"引入，和设备断点解耦 - 必须提供无
media的基础样式表（如base.css），否则旧浏览器或 JS 关闭时页面无样式 - Safari 12.1+、Chrome 76+ 才支持
prefers-color-scheme，低于此版本直接跳过该<link>
移动端加载失败的三个典型信号
如果手机访问时没加载预期 CSS，先看 Network 面板里有没有请求发出，而不是只盯着样式是否生效——后者测的是 CSS 里的 @media，不是 <link media> 的逻辑。
- Network 里压根看不到对应 CSS 请求 →
media值非法或不匹配（检查括号、空格、逗号是否英文） - 请求发出了但返回 404 → 路径写错，或构建工具（如 Webpack）压缩时误删了
media属性 - 请求成功但样式没应用 → 该 CSS 文件里有更高权重的选择器覆盖了它，或
base.css里已定义同名规则且加载顺序靠后
真正可靠的手机端按需加载，靠的是 HTML 解析阶段就拦截请求，不是等 CSS 下载完再计算规则。这点一旦搞混，优化就全落空了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
