如何根据屏幕大小加载不同的 css 文件 - 仍然缺少好的答案答案

【问题标题】：How to LOAD different css files based on screen size - still missing good answer如何根据屏幕大小加载不同的 css 文件 - 仍然缺少好的答案
【发布时间】：2020-08-22 04:53:01
【问题描述】：

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

这是我的问题：我想根据设备宽度加载不同的 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 responsive-design media-queries

【解决方案1】：

您为什么不尝试在您的 css 文件中使用媒体查询。只需要一个 css 文件，并且你指定什么时候屏幕尺寸更小，那么包含在媒体查询中的样式将被覆盖

【讨论】：

Bc 我想要超快的性能，我有很多 JS（大约 100kb）和 CSS（大约 20kb），我不想给页面添加不必要的“重量”因为有 A需要更改很多 CSS 以使其适应移动设备。我是对的还是我的艰难过程很糟糕？
你检查过这个吗？ stackoverflow.com/questions/24254517/…
是的，我做了，同样的答案，一个非常糟糕的做法，那就是使用@import
也许你没明白我的意思。如果用户是移动用户（小屏幕），我正在尝试加载一个文件，另一个是用户是桌面用户（大屏幕）并且不将它们都包含在同一页面上（所以他们不会导致它成为“重”）

【解决方案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

【讨论】：

这不是我想要的，在您发送的“Demo”链接上，我们可以看到通过 HTTP 请求发送的所有文件，但感谢您的回答！跨度>