如何绑定带媒体查询的样式表，使其仅在满足条件时才下载

核心结论 #

浏览器默认会下载所有带rel="stylesheet"的link标签指向的资源，无论其media属性的查询规则是否匹配当前环境，仅在匹配时才会应用样式。这种设计是为了保证用户动态调整窗口尺寸时，样式可以即时切换，避免加载等待导致的样式闪烁。

目前没有原生HTML方案可以实现媒体查询不匹配时阻止样式表下载，需要通过JavaScript动态加载实现需求。

实现方案 #

动态判断视口尺寸加载样式 #

逻辑为：初始化时判断视口宽度，符合桌面端阈值再加载desktop.css；同时监听窗口大小变化，第一次达到阈值时触发加载，避免重复加载。

const DESKTOP_BREAKPOINT = 780;
let isDesktopCssLoaded = false;

// 加载桌面端样式的方法
function loadDesktopCss() {
  if (isDesktopCssLoaded) return;
  const linkEl = document.createElement('link');
  linkEl.rel = 'stylesheet';
  linkEl.href = '/css/desktop.css';
  document.head.appendChild(linkEl);
  isDesktopCssLoaded = true;
}

// 页面初始化判断
if (window.innerWidth >= DESKTOP_BREAKPOINT) {
  loadDesktopCss();
}

// 监听窗口尺寸变化
window.addEventListener('resize', () => {
  if (window.innerWidth >= DESKTOP_BREAKPOINT) {
    loadDesktopCss();
  }
}, { passive: true });

注意事项 #

该方案会导致用户首次将窗口从小于阈值拉到大于阈值时，出现短暂的样式加载空白期，需要根据业务场景权衡体验和资源加载成本。

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