用标签的media属性是最可靠、最可控的css按需加载方式；@import虽语法合法但串行阻塞、调试难，不推荐；css内部@media规则无法阻止下载，仅控制生效。
media 属性是最可靠、最可控的方式；@import 带媒体查询虽语法合法，但加载慢、调试难、不推荐；CSS 内部的 @media 规则适合逻辑集中、断点不多的项目，但所有样式仍会下载。
用 <link rel="stylesheet"> 的 media 属性加载设备专属 CSS
这是生产环境首选方案，浏览器原生支持、并行加载、可预加载、调试直观。
-
media值必须是合法媒体查询表达式，比如screen and (max-width: 768px)，不能写成max-width: 768px（缺screen and会导致全设备加载） - 多个
<link>可共存，浏览器只应用匹配当前环境的样式表，但注意：未匹配的文件仍可能发起请求（现代 Chrome/Firefox 已优化为 lazy-load，但 Safari 旧版本仍会预取） - 关键路径上的样式建议用
rel="preload"提前拉取，例如：<link rel="preload" href="mobile.css" as="style" media="screen and (max-width: 768px)"> - 避免嵌套过深的逻辑，比如
screen and (min-width: 480px) and (max-width: 768px) and (orientation: landscape)——可读性差，也难测试
@import 带媒体查询为什么尽量不用
@import 放在 CSS 文件里也能条件加载，但它本质是串行阻塞的，且位置受限。
-
@import必须写在 CSS 文件最开头，任何前置规则（哪怕是一行注释）都会让它失效 - 每条
@import都触发一次独立 HTTP 请求，无法和主 CSS 并行，拖慢渲染 - 开发者工具里看不到它是否被加载或被跳过，出问题时排查困难
- 构建工具（如 Webpack/Vite）通常不处理 CSS 内的
@import媒体查询，容易导致本地开发和构建行为不一致
什么时候该用内部 @media 而不是外链
当项目样式总量不大、断点清晰、团队协作成本优先于首屏请求数时，单 CSS + @media 更简单。
- 所有断点规则写在一个文件里，避免维护多份 CSS 的同步问题
- 注意顺序：
@media规则不会自动“覆盖”前面的样式，而是靠 CSS 层叠和选择器权重生效；移动端优先写法更安全 - 不要把整个
desktop.css搬进@media (min-width: 1024px)里——重复代码多、压缩率低、缓存效率差 - 如果用了 CSS-in-JS 或原子化框架（如 Tailwind），
@media是唯一可行方式，因为样式生成发生在运行时
打印、横屏、高 DPI 这类非宽度场景怎么处理
这些场景不适合用宽度断点驱动，要靠媒体类型或特性直连设备能力。
- 打印样式必须用
media="print"，否则用户 Ctrl+P 时不会生效；且建议单独一个print.css，里面用display: none隐藏导航/广告等无关内容 - 横屏适配用
media="screen and (orientation: landscape)"，但注意：iOS Safari 在地址栏收起时会误报orientation，建议配合 JavaScript 监听resize做兜底 - Retina 屏检测别只用
-webkit-min-device-pixel-ratio: 2，应补全标准写法：screen and (min-resolution: 192dpi)，否则在 Firefox 或新 Edge 上失效
media 查询，而是当设计稿要求“iPad 竖屏下隐藏侧边栏，但横屏时显示且固定宽度”，这种组合条件在不同浏览器里的解析差异、viewport 设置是否正确、以及是否被其他 CSS 规则意外覆盖——这些才是上线前必须手动真机验证的点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
