使用CSS媒体查询结合link标签和@media规则，可按屏幕尺寸加载不同样式，提升性能与体验。1. 通过link的media属性按需加载mobile.css或desktop.css，减少资源消耗；2. 在单文件中用@media实现响应式布局，便于维护；3. 可用JavaScript动态插入样式，但需注意性能与SEO影响。合理设置断点并根据项目规模选择方案最为关键。
在现代网页开发中，为了让页面在不同设备上都能良好显示，我们常使用CSS媒体查询（Media Queries）结合多种CSS引入方式，根据屏幕尺寸加载或应用不同的样式。这种方式既能提升性能，又能优化用户体验。
1. 使用link标签结合media属性按需加载
可以通过多个标签引入不同的CSS文件，并利用其media属性控制在特定屏幕条件下加载对应的样式表。
- 为小屏设备加载轻量样式：
- 为桌面设备加载完整样式：
立即学习“前端免费学习笔记（深入）”；
浏览器只会下载当前条件匹配的CSS文件，未匹配的不会加载，有助于减少资源消耗。
2. 在单个CSS文件中使用@media规则响应布局
更常见的做法是将所有样式写入一个CSS文件，通过内部的@media查询实现响应式设计。
- 定义移动端优先的默认样式：
- 在宽屏下覆盖样式：
- 适配平板或横屏手机：
/* 默认适用于小屏 */
.container { width: 100%; padding: 10px; }
@media screen and (min-width: 769px) {
.container { width: 750px; margin: 0 auto; }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
.container { width: 90%; }
}
这种方法便于维护，适合中小型项目统一管理样式逻辑。
3. 结合JavaScript动态控制样式加载
在某些高性能需求场景下，可借助JavaScript判断屏幕尺寸，动态插入相应的CSS链接。
- 示例代码：
<script><br /> const link = document.createElement('link');<br /> link.rel = 'stylesheet';<br /> if (window.innerWidth <= 768) {<br /> link.href = 'mobile.css';<br /> } else {<br /> link.href = 'desktop.css';<br /> }<br /> document.head.appendChild(link);<br /> </script>
注意：此方法需谨慎使用，可能影响首屏渲染速度和SEO。
基本上就这些。合理利用link的media属性与CSS中的@media规则，是最稳定高效的响应式方案。是否拆分CSS文件取决于项目规模和性能要求。不复杂但容易忽略的是确保断点设置符合实际设计需求，而不是盲目套用常见尺寸。
