如何通过JavaScript根据屏幕尺寸动态加载对应的CSS文件

你当前的代码只能满足页面首次加载时窗口宽度小于576px的单一加载场景，不算完整可用的实现，存在以下明显缺陷：

• 仅在页面初始化时判断一次宽度，用户后续手动缩放窗口、横竖屏切换时，不会动态切换/卸载对应样式，容易出现样式冲突
• 依赖JS执行，用户禁用JS时对应样式完全不会加载，兼容性差
• 动态加载CSS会产生短暂的无样式内容闪烁（FOUC），影响用户体验

方案1：原生link标签media属性实现（首推） #

完全不需要写JS，用HTML原生特性即可实现需求，浏览器会自动根据当前屏幕尺寸匹配生效的样式，窗口变化时也会自动切换：

<!-- 宽度<576px时自动生效，大于该尺寸时仅加载不启用样式 -->
<link rel="stylesheet" href="xs_0/style.css" media="(max-width: 575.98px)">
<!-- 其他断点的适配样式可同理配置 -->
<link rel="stylesheet" href="sm_style.css" media="(min-width: 576px) and (max-width: 767.98px)">
<link rel="stylesheet" href="default_style.css" media="(min-width: 768px)">

该方案优势：

• 原生支持无兼容性问题，不依赖JS运行
• 窗口尺寸变化时自动切换生效样式，无需额外逻辑
• 样式可提前加载，不会出现FOUC问题

方案2：优化后的动态JS实现（适合需要节省带宽的场景） #

如果你不想提前加载所有断点的CSS、希望按需加载减少带宽消耗，可以用优化后的JS方案，新增resize监听、防抖处理、旧样式卸载逻辑：

// 存储已加载的样式节点，方便后续卸载
let loadedStyleNode = null
const MOBILE_BREAKPOINT = 576
// 防抖定时器
let resizeTimer = null

function loadAdaptiveStyle() {
  const isMobileViewport = window.innerWidth < MOBILE_BREAKPOINT
  // 已加载对应样式则直接返回
  if (loadedStyleNode) {
    const loadedIsMobile = loadedStyleNode.href.includes('xs_0')
    if (loadedIsMobile === isMobileViewport) return
    // 样式不匹配则卸载旧节点
    loadedStyleNode.remove()
    loadedStyleNode = null
  }
  // 创建新样式节点加载对应CSS
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.type = 'text/css'
  link.href = isMobileViewport ? 'xs_0/style.css' : 'default_style.css'
  document.head.appendChild(link)
  loadedStyleNode = link
}

// 页面初始化时执行
loadAdaptiveStyle()
// 监听窗口变化，加200ms防抖避免频繁触发
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(loadAdaptiveStyle, 200)
})

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