如何在HTML中条件引入CSS_根据屏幕尺寸与媒体查询加载

使用link标签的media属性可按屏幕尺寸加载CSS，如小屏用mobile.css、大屏用desktop.css，并支持打印样式；也可在CSS中用@media定义响应式规则，减少请求；进阶可用JavaScript动态插入样式表，但可能引发闪动，推荐优先采用media属性或内部媒体查询实现响应式设计。

在HTML中根据屏幕尺寸条件引入CSS，可以通过媒体查询（media queries）来控制不同设备加载不同的样式表。这不仅能提升页面性能，还能实现响应式设计。

使用link标签的media属性

最直接的方法是在标签中添加media属性，指定CSS文件仅在满足特定条件时加载。

• 为小屏幕（手机）加载特定样式：
• 为大屏幕（桌面）加载另一套样式：
• 仅打印时应用样式：

结合多个断点实现响应式

你可以引入多个CSS文件，每个对应一个屏幕范围，实现精细化控制。

浏览器会根据当前视口宽度，只应用匹配条件的样式表。

在CSS内部使用@media规则

另一种更常见的方式是：只引入一个CSS文件，然后在该文件中使用@media规则进行条件样式定义。

/* style.css */
body {
  background: white;
}
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
}
@media screen and (min-width: 769px) {
.container {
padding: 20px;
}
}

这种方式减少了HTTP请求，适合中小型项目。

动态加载CSS（进阶）

如果需要更灵活的控制，可以用JavaScript检测屏幕尺寸，并动态插入标签。

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介入。不复杂但容易忽略细节，比如断点值的一致性与设备实际渲染宽度的差异。