HTML条件加载不同CSS的几种方法

• ：小屏幕设备加载 mobile.css
• ：打印时加载 print.css
• ：桌面端加载 desktop.css

<script>
  if (window.innerWidth <= 768) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'mobile.css';
    document.head.appendChild(link);
  } else {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'desktop.css';
    document.head.appendChild(link);
  }
</script>

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'dark-theme.css';
  document.head.appendChild(link);
}

<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css">
<![endif]-->

<?php
  $isMobile = preg_match('/(android|iphone|ipad)/i', $_SERVER['HTTP_USER_AGENT']);
  echo $isMobile ? 
    '<link rel="stylesheet" href="mobile.css">' : 
    '<link rel="stylesheet" href="desktop.css">';
?>