如何通过JS根据屏幕宽度阈值切换HTML页面的CSS文件

之前用JS重定向到移动端页面的方式效率太低，想直接根据屏幕宽度切换CSS文件，以下是几种可行方案：

方案一：正确使用<link>标签的media属性 #

你之前尝试的媒体查询写法存在区间重叠问题（比如360px会同时匹配两个规则），调整规则让区间互不重叠即可，浏览器会自动根据当前屏幕宽度加载对应CSS：

<!-- 基础样式，所有屏幕都加载 -->
<link rel="stylesheet" href="master.css">

<!-- 小屏幕（宽度≤359px）加载 -->
<link rel="stylesheet" media="screen and (max-width: 359px)" href="small-screen.css">

<!-- 中屏幕（360px≤宽度≤550px）加载 -->
<link rel="stylesheet" media="screen and (min-width: 360px) and (max-width: 550px)" href="medium-screen.css">

<!-- 大屏幕（宽度≥551px）加载 -->
<link rel="stylesheet" media="screen and (min-width: 551px)" href="large-screen.css">

注意：要确保媒体查询区间无重叠，避免样式冲突。浏览器只会加载符合当前媒体条件的CSS文件，无需额外JS逻辑。

方案二：在单个CSS文件中嵌套媒体查询 #

如果不想拆分多个CSS文件，可以把不同屏幕的样式写在同一个文件里，用媒体查询包裹对应规则：

/* 基础样式，所有屏幕通用 */
body {
  margin: 0;
  padding: 0;
}

/* 小屏幕样式 */
@media screen and (max-width: 359px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

/* 中屏幕样式 */
@media screen and (min-width: 360px) and (max-width: 550px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
}

/* 大屏幕样式 */
@media screen and (min-width: 551px) {
  .container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
  }
}

这种方式无需管理多文件，维护起来更便捷。

方案三：JS动态切换样式表（适合复杂场景） #

如果需要更灵活的控制（比如窗口大小改变时实时切换），可以用JS监听resize事件，动态修改样式表路径：

<!-- 基础样式 -->
<link rel="stylesheet" href="master.css">
<!-- 用于动态切换的样式表 -->
<link rel="stylesheet" id="dynamic-style">

<script>
function switchStyleSheet() {
  const width = window.innerWidth;
  const styleElement = document.getElementById('dynamic-style');
  
  if (width <= 359) {
    styleElement.href = 'small-screen.css';
  } else if (width >= 360 && width <= 550) {
    styleElement.href = 'medium-screen.css';
  } else {
    styleElement.href = 'large-screen.css';
  }
}

// 页面加载时执行一次
switchStyleSheet();
// 窗口大小改变时重新切换
window.addEventListener('resize', switchStyleSheet);
</script>

你之前的媒体查询链接未生效的原因 #

大概率是区间重叠（比如360px同时匹配max-width:360px和min-width:360px），导致样式优先级冲突，调整为互不重叠的区间即可解决问题。

内容的提问来源于stack exchange，提问作者michealangelo