Question

我想将我相当大的CSS文件分解为单独的专用样式表 - 一个用于移动设备，平板电脑和桌面设备。我的目的是减少在移动设备上下载的数据量（为什么下载包含移动平板电脑和桌面样式的600kb css文件，而我只能为移动设备下载40kb文件？）。

有没有办法使用媒体查询只加载所需的样式表？

我试过了：

@import url(mobile.css) (max-width:599px);
@import url(tablet.css) (min-width:600px);
@import url(desktop.css) (min-width:1200px);

和

<link rel='stylesheet' media='screen and (max-width: 599px)' href='mobile.css' />
<!-- and again for tablet and desktop -->

但在开发人员工具中，我可以看到浏览器会下载所有三个css文件，无论我使用哪种技术。

是否可以使用媒体查询加载所需资源？

我知道使用matchMedia的JS方法，但我正在寻找一个仅限CSS的解决方案。

修改

请阅读问题 - 我想根据媒体查询加载特定的样式表。无论媒体查询属性如何，所有浏览器都会下载所有样式表，这样就无法获得仅限移动设备的样式表！ 如何根据媒体查询下载我想要的样式表？

Answer 1

如果您这样做，您的网站将无法响应。响应说设计适应分辨率，而不仅仅是设备，当桌面屏幕的宽度为600像素时你必须显示平板电脑版本，不是吗？减少文件的最佳方法是在生产版本中将所有css缩小到一个文件中，在开发版本中，您将获得所有已拆分的css

Answer 2

尝试在HTML中执行此操作，例如：

<link rel="stylesheet" media="only screen and (handheld)" href="example.css" />

source 我不明白为什么这不适用于（min-width：1200px）`（例如）。

通常情况下，小屏幕的css会非常小，小屏幕使用桌面版本中的大部分样式，隐藏一些元素并调整大小。