link的media属性控制是否发起http请求，而非是否应用样式；它使浏览器按媒体查询条件决定是否下载对应css文件，实现真正的按需加载。
link的media属性到底控制什么
它控制的是“是否发起HTTP请求”，不是“是否应用样式”。@media规则在CSS里只是开关，所有样式仍随主文件下载；而<link media>能让浏览器压根不拉那个CSS文件——这才是真正的按需加载。
常见错误现象：Failed to load resource却看不到对应网络请求；开发者工具里写了@media (max-width: 768px)，但移动端样式没生效；用display: none隐藏PC组件，结果大图和JS还是被下载了。
-
media值必须是合法媒体查询，不能写media="mobile"这种自定义字符串 - 匹配失败时，对应CSS文件不会出现在Network面板里，静默跳过
- IE9及以下会忽略
media属性，无条件加载所有<link>——需要兼容就得回退到JS检测
怎么写才能让mobile.css只在手机上下载
关键不是断点数字，而是确保互斥、覆盖完整视口范围，并且路径正确。漏掉边界或写错单位，会导致某些设备既不走mobile也不走desktop。
典型写法：
<link rel="stylesheet" href="base.css"><link rel="stylesheet" href="mobile.css" media="(max-width: 767px)"><link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
- 断点用
767px和768px而非768px和768px，避免768px宽度设备同时命中两个条件 -
href路径必须相对于HTML文档位置，写错会404，但浏览器不报错，只静默失败 - 不要用
only screen前缀——现代浏览器已不需要，且部分旧版iOS Safari反而不识别
如何给iPad单独加pad.css
别信device-width，它在iOS 13+已失效；也别靠UA判断，不可靠还增加JS负担。真正可用的是视口宽度+DPR组合。
推荐写法：
<link rel="stylesheet" href="pad.css" media="screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)">
- iPad竖屏视口宽768px，横屏1024px，但新iPad Pro有834px等中间值，所以用区间比单值更稳妥
-
-webkit-min-device-pixel-ratio: 2过滤掉普通DPR=1的安卓平板，减少误触发 - 如果还要区分横竖屏，拆成两个
<link>：一个加and (orientation: portrait)，另一个加and (orientation: landscape)
为什么@import加media根本没用
因为@import url("mobile.css") screen and (max-width: 768px)看起来像按需加载，实际所有@import的CSS都会在初始渲染阶段同步下载并解析——浏览器根本不看media条件就拉文件。
这导致三个问题：
- 移动端多下100KB无用CSS，浪费带宽
- 阻塞渲染，尤其当
@import嵌套多层时 - 某些iOS Safari版本直接忽略带media的
@import，pad.css完全不生效
真要物理隔离文件，只能靠<link media>。哪怕多写几行HTML，也比埋个性能雷强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
