使用 的 media 属性无法避免非匹配 css 的下载，仅控制应用；应将所有断点逻辑整合进单个 css 文件，用 @media 规则实现响应式，兼顾性能与可维护性。
用 <link> 的 media 属性加载不同 CSS 文件会下载所有文件
浏览器看到带 media 属性的 <link rel="stylesheet">，不管是否匹配当前视口，**都会发起请求并下载**（只是不应用）。比如：<link rel="stylesheet" href="mobile.css" media="max-width: 768px"><link rel="stylesheet" href="desktop.css" media="min-width: 769px">
在手机上，desktop.css 仍会被下载，浪费带宽、拖慢首屏。这不是“按需加载”，只是“按需应用”。
常见错误是误以为未匹配的 CSS 不会发请求——实际 DevTools 的 Network 面板里能看到它们全在 pending 或 finished 状态。
如果你真要用多文件方案，必须配合 rel="preload" + as="style" 手动控制关键资源优先级，但复杂度陡增，且无法解决非关键 CSS 的冗余下载问题。
@media 查询写在一个 CSS 文件里才是主流做法
把所有断点逻辑收进一个文件，靠 @media 控制样式生效范围，既避免多余请求，又利于压缩、缓存和工程化管理。典型结构是：
- 基础样式（移动端优先）写在最前面，不包
@media - 平板断点用
@media (min-width: 768px)向上增强 - 桌面断点用
@media (min-width: 1024px)再增强 - 高清屏适配加
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
注意：断点值是视口宽度（CSS px），不是设备物理分辨率；受缩放、横竖屏、<meta name="viewport"> 影响。比如 iPad Air 横屏时视口可能是 1024px，即使它物理分辨率达 2048×1536。
想按 DPI 加载不同背景图？image-set() 在 Firefox 里直接失效
Firefox（截至 v128）完全不解析 image-set()，整条 background-image 声明被静默丢弃，DevTools 里该行显示为划掉，控制台无报错。正确写法必须降级叠加：
background-image: url("logo@1x.png");
background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
关键细节：
-
-webkit-image-set()必须写在image-set()前面，否则 Safari ≥16.4 可能忽略 1x 图 - 1x 项不能省略，旧版 Safari 遇到缺失 1x 会整条丢弃
- 所有路径必须加引号，如
url("logo@2x.png")，不能裸写 -
image-set()只响应device-pixel-ratio，无法区分“小屏高 DPR”和“大屏低 DPR”，真要双重适配得靠@media分层 +image-set()组合
JavaScript 动态切换 CSS 文件只适合极少数场景
用 JS 读取 window.innerWidth 或 screen.width 动态改 <link> 的 href，看似灵活，实则问题多：
- 首次渲染时没样式（FOUC），尤其 SSR 场景更明显
- 窗口 resize 时频繁操作 DOM，易引发重排重绘
- 不响应系统级变化（如 macOS 的暗色模式切换、Windows 缩放设置）
- 服务端无法预判，不利于 SSR 和 SEO
除非你明确需要根据非 CSS 媒体特性（比如用户地理位置、登录状态、A/B 实验分组）加载样式，否则没必要绕开原生 @media 机制。
真正容易被忽略的是：视口宽度 ≠ 设备分辨率，@media 匹配的是浏览器渲染区尺寸，而 screen.width 是设备物理像素宽度——两者在高 DPR 设备上可能差 2–3 倍。别拿后者当断点依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
