使用link标签的media属性可按屏幕尺寸加载CSS，如小屏用mobile.css、大屏用desktop.css，并支持打印样式；也可在CSS中用@media定义响应式规则，减少请求；进阶可用JavaScript动态插入样式表，但可能引发闪动，推荐优先采用media属性或内部媒体查询实现响应式设计。
在HTML中根据屏幕尺寸条件引入CSS，可以通过
媒体查询
（media queries）来控制不同设备加载不同的样式表。这不仅能提升页面性能，还能实现
响应式设计
。
使用link标签的media属性
最直接的方法是在
标签中添加
media
属性，指定CSS文件仅在满足特定条件时加载。
为小屏幕（手机）加载特定样式：
为大屏幕（桌面）加载另一套样式：
仅打印时应用样式：
结合多个断点实现响应式
你可以引入多个CSS文件，每个对应一个屏幕范围，实现精细化控制。
浏览器
会根据当前视口宽度，只应用匹配条件的样式表。
立即学习
“
前端免费学习笔记（深入）
”；
在CSS内部使用@media规则
另一种更常见的方式是：只引入一个CSS文件，然后在该文件中使用
@media
规则进行条件样式定义。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
这种方式减少了HTTP请求，适合中小型项目。
动态加载CSS（进阶）
如果需要更灵活的控制，可以用JavaScript检测屏幕尺寸，并动态插入
标签。
注意：这种方法延迟了样式的加载，可能造成页面闪动，建议谨慎使用。
基本上就这些。优先推荐使用
link + media属性
或
CSS中的@media
规则，简单有效，兼容性好，无需JavaScript介入。不复杂但容易忽略细节，比如断点值的一致性与设备实际渲染宽度的差异。
/* style.css */
body {
background: white;
}
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
}
@media screen and (min-width: 769px) {
.container {
padding: 20px;
}
}
if (window.innerWidth <= 768) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'mobile.css';
document.head.appendChild(link);
}