最稳妥的按视口宽度加载不同css的方式是使用，浏览器原生支持、无需js，且只下载并应用匹配的文件；需严格衔接断点、包含screen、避免与@media混淆。

用 <link media> 按视口宽度加载不同 CSS

浏览器原生支持，无需 JS，最稳妥的方式就是直接在 HTML 中用 <link> 的 media 属性做条件加载。它不是“切换”样式，而是让浏览器只下载并应用匹配的那一个文件。

• 必须写对断点逻辑：比如 max-width: 768px 和 min-width: 769px 要严格衔接，否则中间可能有 1px 空隙导致无样式生效
• media 值里不要漏掉 screen（虽然多数浏览器默认是 screen，但部分旧版 Safari 会忽略纯 (max-width:...)）
• 多个 <link> 标签可以共存，浏览器只激活匹配的那个；但注意：所有标签都会发起 HTTP 请求（即使不匹配），除非你用 rel="preload" + as="style" + onload 手动切换，那已是进阶用法
• 示例：<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">、<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)">

用 JavaScript 动态插入 <link> 控制加载时机

当你需要根据非尺寸条件引入 CSS（比如用户偏好色、登录状态、设备 DPR、甚至 URL 参数），media 就不够用了，得靠 JS 创建并插入 <link> 标签。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 务必在 中尽早执行，避免 FOUC（样式闪动）；推荐放在 底部或用 DOMContentLoaded 触发
• 插入后要显式设置 link.rel = "stylesheet"，否则只是个普通 link，不会触发样式加载
• 注意缓存：相同 href 的 <link> 多次插入不会重复请求，但若 href 带时间戳或 hash 变化，就得手动清理旧 link，否则内存泄漏
• 简单示例：

  const link = document.createElement('link');<br>link.rel = 'stylesheet';<br>link.href = window.innerWidth document.head.appendChild(link);

别把 @media 查询和 <link media> 搞混

这是最容易踩的坑：以为把所有响应式规则都塞进一个 CSS 文件，再用 @media 包裹，就等于“按屏幕宽度引入”——其实不是。

• @media 是运行时样式开关，整个 CSS 文件仍会被下载、解析、计算，哪怕当前不匹配任何规则
• <link media> 是资源级条件加载，不匹配的 CSS 文件根本不会发请求（HTTP waterfall 里看不到）
• 性能差异明显：一个 200KB 的全量 CSS + @media，和两个各 80KB 的分片 CSS + <link media>，前者首屏渲染压力大得多
• 调试时看 Network 面板：如果看到未匹配的 CSS 文件仍在加载，说明你用的是 @media，不是条件引入

移动端要注意 device-width 和 width 的区别

在 media 查询里写 max-device-width: 400px 看似合理，但实际几乎没用——它匹配的是设备物理屏幕宽度，不随横竖屏旋转变化，也不受缩放影响。

• 绝大多数响应式场景该用 max-width（视口宽度），它随浏览器窗口/视口实时变化，包括 iOS 横竖屏切换
• device-width 主要用在老旧适配或特定打印场景，日常开发基本不用
• 验证方法：Chrome DevTools 切换手机模拟器，旋转屏幕，观察样式是否响应——如果不变，大概率写错了媒体查询条件
• 额外提醒：viewport meta 必须存在且正确，否则 width 媒体查询在移动端会失效：<meta name="viewport" content="width=device-width, initial-scale=1">

实际项目里，多数情况用 <link media> 就够了；只有当条件超出 CSS 能力范围时，才上 JS。真正难的不是怎么写，而是想清楚：这个 CSS 是“必须随尺寸切换”，还是“只是样式表现不同”——前者才值得拆文件引入。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！