问题描述
首先，我知道这个问题被问过很多次，但是每个答案都是错误的或过时的。
这是我的问题：我想根据设备宽度加载不同的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或服务器端语言，如果我确实需要，那就可以，但是请给我一些理由，说明您的方法会更好。非常感谢！
解决方法
为什么不尝试在CSS文件中使用媒体查询。只需一个css文件，您可以指定屏幕尺寸较小的时间，然后包装在媒体查询中的样式将被覆盖
,IE 9 +，Firefox 3.6 +，Safari 3+，任何Chrome，Opera 10+。 Mozilla建议以“ only”开头的media属性，这将在不支持媒体查询的旧版浏览器中隐藏样式表。那可能不是您真正想做的……当然要视情况而定。
<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