使用link标签media属性可按屏幕尺寸加载对应CSS，如移动端、平板和桌面端分别引入不同文件；也可在单个CSS中用@media查询实现响应式布局，便于维护；大型项目可通过JavaScript动态加载所需样式，减少初始体积；结合Webpack等构建工具能进一步优化加载策略。多数场景推荐以@media为主的方案，兼顾性能与维护性。
在响应式设计中，如何让不同屏幕尺寸的设备加载对应的CSS样式，是提升性能与用户体验的关键。通过合理使用CSS引入方式，可以实现按屏幕加载样式，避免不必要的资源浪费。
1. 使用link标签的media属性按屏幕引入CSS
最直接的方式是利用HTML中的<link>标签结合media属性，在页面加载时根据设备特性引入不同的样式文件。
例如：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)" /><link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1023px)" />
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1024px)" />
浏览器会根据当前视口宽度，仅加载匹配条件的CSS文件，未匹配的文件虽会被下载但优先级较低，实际应用中建议配合其他优化手段。
立即学习“前端免费学习笔记（深入）”；
2. 在CSS内部使用@media进行响应式控制
更常见的做法是在一个CSS文件中使用@media查询，集中管理不同屏幕的样式规则。
例如：
/* 基础样式（移动端优先） */.container { padding: 10px; }
@media screen and (min-width: 768px) {
.container { padding: 20px; }
}
@media screen and (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}
这种方式便于维护，所有样式集中管理，适合中小型项目。虽然所有样式都会被加载，但可通过压缩和缓存优化性能。
3. 动态加载CSS：按需引入提升性能
对于大型应用，可使用JavaScript检测屏幕尺寸，动态创建<link>标签，实现真正“按需加载”。
示例代码：
if (window.innerWidth <= 767) {loadCSS('mobile.css');
} else if (window.innerWidth < 1024) {
loadCSS('tablet.css');
} else {
loadCSS('desktop.css');
}
function loadCSS(href) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
这种方法确保只加载当前设备所需的样式，减少初始加载体积，特别适合多端差异大的项目。
4. 结合现代构建工具实现智能拆分
使用Webpack、Vite等构建工具，可将不同媒体查询的样式提取为独立文件，并通过动态导入或预加载提示优化加载时机。
配合<link rel="preload">可提前加载关键断点样式：
这样既保留了按需加载的优势，又提升了高分辨率设备的渲染速度。
基本上就这些。选择哪种方式取决于项目规模、性能要求和维护成本。多数情况下，推荐以@media为主的单文件响应式方案，辅以动态加载处理极端差异场景。不复杂但容易忽略细节。
