标签的media属性需写成media="screen and (max-width: 768px)"才生效，缺少screen and前缀会导致部分浏览器（如旧版safari）忽略；它在html解析阶段决定是否发起css请求，而非加载后隐藏，性能优于css中@media规则。
link标签的media属性怎么写才生效
直接写 media="screen and (max-width: 768px)" 是对的，但浏览器只在匹配时才下载对应CSS，不匹配就跳过——不是“加载后隐藏”，而是根本不会发请求。这点很多人误以为是CSS里加@media才起作用，其实<link>层面就能拦截。
常见错误现象：media="max-width: 768px" 缺少screen and前缀，在部分浏览器（尤其是旧版Safari）里会被忽略；或者用了media="print"却在屏幕上看效果，结果发现样式压根没加载。
- 必须带媒体类型前缀，推荐统一用
screen（除非真要针对打印） - 媒体查询语法要完整，
screen and (min-width: 480px)✅，(min-width: 480px)❌ - 多个条件用
and连接，用,（英文逗号+空格）表示“或”关系，比如screen and (min-width: 480px), screen and (min-resolution: 2dppx) - 注意：Chrome DevTools 的“Network”面板里看不到被 media 屏蔽的 CSS 请求——它根本不会发出
和CSS里@media相比，link的media有什么实际区别
核心区别在资源加载时机和粒度。<link media="..."> 是资源级控制，决定这个CSS文件下不下；而@media块是规则级控制，整个CSS文件仍会下载、解析、计算，只是部分规则不生效。
使用场景很明确：如果你有一套纯移动端组件样式（比如 mobile-components.css），且桌面端完全不需要，那就用<link media="screen and (max-width: 768px)">；但如果只是调整按钮间距、字体大小这类小改动，用@media更合适——避免多一次HTTP请求开销。
- 性能影响：link media 能减少请求数和首屏关键资源体积，尤其对低配设备或弱网有用
- 兼容性：IE9+ 支持
media属性，但不支持dynamic media queries（比如窗口缩放时动态切换已加载的 link） - 注意：如果用
rel="preload"提前加载某个CSS，media属性会被忽略——preload 不管媒体条件
如何测试media是否按预期工作
别只靠浏览器缩放窗口看样式变不变，那测的是CSS里的@media，不是<link>的media逻辑。
真正验证方式是看网络请求是否触发。打开 DevTools → Network → 刷新页面 → 筛选 css → 观察每个<link>对应的请求是否存在。
- 在桌面模式下，
<link media="screen and (max-width: 480px)">对应的CSS不应出现在Network列表中 - 切到响应式调试模式并设为iPhone SE尺寸（375px宽），它应该立刻出现
- 如果始终不出现，检查是否拼错了
href路径，或服务器返回了404/403——media 属性不会掩盖路径错误 - 注意：某些构建工具（如Vite、Webpack）的开发服务器可能默认禁用媒体查询拦截，生产环境构建后才生效
移动端适配时容易漏掉的关键点
很多人写了 media="screen and (max-width: 768px)" 就以为覆盖了所有小屏，但实际漏了高DPI屏和横竖屏切换。
比如 iPad Pro 在横屏时宽度是1024px，但用户拿着它当手机用——这时候仅靠宽度判断就不够了。另外，device-width 已被现代浏览器弃用，不要用。
- 优先用
screen and (max-width: 768px)，而不是screen and (max-device-width: 768px) - 需要兼顾高分辨率设备？加一个
screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2)分开加载高清版 - 横竖屏切换时，
<link>的media不会重新评估——已加载的不会卸载，未加载的也不会补上。所以别指望它实时响应旋转 - 最稳妥的做法：把基础通用样式放主CSS里，只用
<link media>加载差异化大、体积也大的模块（如整套图标字体、动画库）
media 属性看着简单，但真正起效依赖浏览器对媒体查询的实时解析能力，而这个能力在页面生命周期里只运行一次——就是HTML解析阶段。之后改media属性值，不会触发重加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
