可通过HTML的标签配合media属性按屏幕宽度加载对应CSS文件，实现响应式按需引入；现代浏览器惰性加载未匹配文件以节省资源，但过多独立文件会增加HTTP请求影响性能，小范围调整推荐单CSS内@media更高效。
可以通过 HTML 的 标签配合 media 属性，在不同屏幕宽度下加载对应的 CSS 文件，实现按需引入。
用 media 属性控制 CSS 文件加载时机
浏览器会根据 media 属性的媒体查询条件，决定是否下载并应用该 CSS 文件。未匹配时，文件通常不下载（现代浏览器支持惰性加载），节省带宽和资源。
- 只在匹配条件成立时才加载对应样式表，适合差异较大的响应式方案（如移动端/桌面端完全不同的布局）
- 注意：不要滥用多个独立文件，过多 HTTP 请求会影响性能；小范围样式调整建议用单个 CSS 内的媒体查询更高效
HTML 中分别引入不同宽度的 CSS
在 中写多个 ，每个指定不同 media 值：
这样，设备宽度落在哪个区间，就加载对应文件。浏览器自动处理匹配逻辑，无需 JS 干预。
立即学习“前端免费学习笔记（深入）”；
注意事项和兼容性提醒
主流浏览器都支持该写法（包括 IE9+）。但要注意几点：
-
media值必须是有效的媒体查询，不能写错语法（如漏括号、拼错max-width） - 所有
标签仍需保留rel="stylesheet"，否则不会被识别为样式表 - 如果某设备同时匹配多个条件（比如刚好 768px），则多个文件都会加载——建议用互斥范围避免重复
- 不推荐用
media="print"等非屏幕类型混用，除非真有打印样式需求
替代方案：单 CSS 文件内用 @media 更常用
对大多数项目，更推荐把所有响应式规则写在一个 CSS 文件里，用 @media 包裹：
@media (max-width: 767px) {
body { font-size: 14px; }
.header { display: none; }
}
@media (min-width: 768px) {
body { font-size: 16px; }
}
这样只需一次请求，维护集中，也利于缓存复用。只有样式差异极大、体积显著不同时，才考虑拆成多个文件。
