时间戳

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

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

问题描述

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

这是我的问题：我想根据设备宽度加载不同的 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 或服务器端语言，如果我真的必须这样做，那没关系，但请告诉我为什么你的方式更好。非常感谢！

标签： cssresponsive-designmedia-queries

解决方案

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

推荐阅读