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

使用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文件，每个对应一个屏幕范围，实现精细化控制。

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

立即学习“前端免费学习笔记（深入）”；

在CSS内部使用@media规则

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

BlessAI

Bless AI 提供五个独特的功能：每日问候、庆祝问候、祝福、祷告和名言的文本生成和图片生成。

89

查看详情

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

以上就是如何在HTML中条件引入CSS_根据屏幕尺寸与媒体查询加载的详细内容，更多请关注php中文网其它相关文章！