移动端css引入最稳妥方式是link标签配合media属性，需搭配viewport元标签，使用明确像素断点（如max-width:480px），避免device-width，确保互斥覆盖且支持all回退。
移动端 CSS 引入方式：link 标签 + media 属性最稳妥
直接在 里用 <link> 加载样式，并通过 media 属性控制加载时机，是移动端响应式最可靠的方式。它比在 CSS 里写 @media 更早介入渲染流程，能避免「闪屏」或「先大屏后缩放」问题。
常见错误是把 media 写成 screen and (max-width: 768px) 却没加 viewport 元标签，导致移动端根本不会触发该断点——因为默认视口宽度远大于 768px。
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，否则media查询基于桌面视口计算 -
media值推荐用screen and (max-width: 480px)、screen and (min-width: 768px)这类明确像素值，避免用handheld（已废弃）或模糊的only screen - 多个
<link>可共存，浏览器只下载并应用匹配的那一个，未匹配的不会请求 CSS 文件（注意：IE9 及以下会预加载所有link，但现代移动端无需考虑）
@media 查询写在 CSS 文件里 vs 外链 link 的区别
写在 CSS 文件里的 @media 是「条件应用」，文件本身总会被下载；而 <link media="..."> 是「条件加载」，不匹配时整个文件不会发起 HTTP 请求。这对首屏性能影响显著。
例如你有三套样式：desktop.css、tablet.css、mobile.css，用外链方式可这样组织：
立即学习“前端免费学习笔记（深入）”；
