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