必须写成screen and (min-width: 768px)等合法css媒体查询语法，不可简写为数字或设备名；漏掉screen and前缀、使用device-width或精确匹配width: 768px均会导致降级加载。
media属性怎么写才能匹配具体像素宽度
直接用 media="screen and (min-width: 768px)" 这类媒体查询语法，不是填数字或设备名。HTML 的 <link> 标签的 media 属性不支持简写（比如 media="768px"），必须是合法的媒体查询字符串。
常见错误是把 CSS 媒体查询规则直接抄进 media 属性却漏掉 screen and 前缀，或者用了不被支持的语法（如 device-width 在现代浏览器中已不可靠）。
-
media="screen and (min-width: 320px) and (max-width: 480px)"—— 匹配窄屏手机 -
media="screen and (min-width: 768px) and (max-width: 1023px)"—— 匹配平板断点（注意：不是768px单独写） -
media="screen and (min-width: 1024px)"—— 匹配桌面及以上 - 避免写
media="(width: 768px)"—— 精确匹配单个宽度几乎无效，因为视口宽度是连续变化的，且含滚动条、缩放等干扰
link标签里media和CSS文件内容的断点要对齐吗
要对齐，但不是强制技术要求，而是逻辑一致性问题。如果 <link media="screen and (min-width: 768px)" href="tablet.css">，那 tablet.css 里就不该再写 @media (max-width: 767px)，否则样式会错位加载。
本质是「外层 media 控制资源是否下载，内层 @media 控制样式是否生效」。两者叠加时，容易出现资源加载了但样式不触发，或反过来——没加载却指望它生效。
- 推荐策略：外层
media做粗粒度分发（如只在桌面加载 desktop.css），里面不再套大范围媒体查询 - 如果必须复用同一份 CSS 文件做多端适配，就别用
media属性做分辨率筛选，改用单个<link href="all.css">+ 完整的内部@media - Chrome DevTools 的 Network 面板能验证：改变窗口宽度时，对应
<link>是否真的被加载/跳过
media属性支持哪些分辨率相关的关键词
只支持标准媒体特性，且必须符合 CSS Media Features 规范。HTML 的 media 属性不识别 retina、hdpi、landscape（单独用）这类非标准写法。
- 可用：
width、min-width、max-width、height、min-height、aspect-ratio、resolution（如resolution: 2dppx） - 慎用：
device-width和device-height—— 已被多数浏览器忽略，行为不可靠 - 无效写法：
media="mobile"、media="ipad"、media="retina"—— 这些不是标准媒体类型或特性 -
resolution支持但需注意单位：media="screen and (resolution: 2dppx)"可行；media="screen and (resolution: 192dpi)"也可，但不同系统换算方式不同，不如dppx稳定
为什么改了窗口大小，link标签没按预期切换加载
因为 <link media> 的匹配只发生在初始 HTML 解析阶段，**不会响应式重计算**。窗口 resize 时，已加载的 CSS 不会卸载，未匹配的也不会补加载。
这是最容易误解的一点：很多人以为 media 是动态监听器，其实它只是资源加载的“一次性开关”。
- 首次加载页面时，浏览器根据当前视口尺寸判断是否下载该 CSS 文件
- 后续 resize、缩放、横竖屏切换，都不会触发新请求或停用已加载的样式表
- 想实现动态切换？得用 JavaScript 手动操作
<link disabled>或增删<link>节点，或者干脆放弃media，改用 JS 驱动的样式注入 - 验证方法：打开 DevTools → Network → 刷新页面 → 检查对应 CSS 是否出现在列表中；再 resize 后刷新，看是否变化
真正要注意的是：media 属性的匹配时机是静态的，而开发者直觉常把它当成动态条件。一旦依赖它做运行时响应，就会卡在“为什么没更新”上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
