如何根据屏幕尺寸加载不同的CSS文件 - 仍然缺少好的答案

Question

首先我知道这个问题以前被问过很多次，但每个答案都是错误的或过时的。

这是我的问题：我想根据设备宽度加载不同的CSS文件。这是总是给出的错误答案：

<link media="screen and (min-width: 721px)" rel="stylesheet" href="./cs/styles.css" />
<link media="screen and (max-width: 720px)" rel="stylesheet" href="./cs/styles-min.css" />

这个答案的问题是两个文件都已加载 --->> 两个文件都是通过 HTTP 请求发送给我们的。这是 mozilla 上的证明：

我的问题是如何通过 HTTP 请求加载/发送给我们只有一个。顺便说一句，如果没有必要，我不想使用 js 或服务器端语言，如果我真的必须这样做，那没关系，但请给我理由为什么你的方法更好。非常感谢！

Answer 1

为什么不在 css 文件中尝试使用媒体查询呢？只需要一个 css 文件，并且您指定当屏幕尺寸较小时，媒体查询中包装的样式将被覆盖

Answer 2

IE 9+、Firefox 3.6+、Safari 3+、任何 Chrome、Opera 10+。 Mozilla 建议以“only”开头，这将对不支持媒体查询的旧浏览器隐藏样式表。这可能是也可能不是您真正想要做的……当然取决于具体情况。

<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css"/>

看到这个参考：https://css-tricks.com/resolution-specific-stylesheets/

演示：https://css-tricks.com/examples/ResolutionDependantLayout/example-one.php

Answer 3

这是较旧的，但也许这会对某人有所帮助：

<script type="text/javascript">
if ( document.documentElement.clientWidth > 900 ) {
    document.getElementsByTagName("head")[0].insertAdjacentHTML( "beforeend", "<link rel='stylesheet' href='path/to/wide.css' />");
}
else if ( document.documentElement.clientWidth > 700 ) {
    document.getElementsByTagName("head")[0].insertAdjacentHTML( "beforeend", "<link rel='stylesheet' href='path/to/medium.css' />");
}
else {
    document.getElementsByTagName("head")[0].insertAdjacentHTML( "beforeend", "<link rel='stylesheet' href='path/to/narrow.css' />");
}