如何实现HTML文件适配移动端加载mobile.css、桌面端加载desktop.css？

方法1：利用<link>标签的media属性（推荐） #

这是最简单直接的方案，浏览器会自动根据当前屏幕尺寸匹配对应的CSS文件，无需额外脚本。

在HTML的<head>中添加两个样式表链接，分别指定适配的屏幕条件：

<head>
  <!-- 移动端加载：屏幕宽度≤768px时生效 -->
  <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
  <!-- 桌面端加载：屏幕宽度≥769px时生效 -->
  <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)">
</head>

• 你可以根据自己的设计需求调整断点（比如把768px改成1024px）。
• 窗口大小改变时，浏览器会自动切换加载对应的CSS文件，无需手动刷新。

方法2：JavaScript动态加载（适合复杂场景） #

如果需要更灵活的判断逻辑（比如结合设备类型、用户行为等），可以用JS动态创建样式表链接：

<head>
  <script>
    function loadTargetCSS() {
      // 移除已加载的样式表，避免重复加载
      const existingLink = document.querySelector('link[data-device-css]');
      if (existingLink) existingLink.remove();

      // 判断当前设备类型
      const isMobile = window.innerWidth <= 768;
      const cssPath = isMobile ? 'mobile.css' : 'desktop.css';

      // 创建新的样式表链接
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = cssPath;
      link.setAttribute('data-device-css', ''); // 标记用于后续移除
      
      document.head.appendChild(link);
    }

    // 页面加载完成后执行
    window.addEventListener('load', loadTargetCSS);
    // 窗口大小改变时重新判断加载
    window.addEventListener('resize', loadTargetCSS);
  </script>
</head>

• 这个方案可以扩展更多判断条件，比如检测用户代理字符串判断设备。
• 添加了移除旧样式表的逻辑，避免重复加载导致样式冲突。

注意事项 #

• 断点选择：没有固定标准，根据你的设计稿和目标设备群体调整即可。
• 样式优先级：如果两个CSS文件中有相同选择器的样式，由于同一时间只会加载一个，不会出现优先级冲突问题。

内容的提问来源于stack exchange，提问作者Trung Kien Nguyen