媒体查询加载资源？
Media Queries to load resource?
我想将我相当大的 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 唯一的解决方案。
编辑
请阅读问题 - 我想加载基于媒体查询的特定样式表。无论媒体查询属性如何，所有浏览器都会下载所有样式表，这违背了拥有仅移动样式表的意义！ 如何根据媒体查询只下载我想要的样式表？
尝试在 HTML 内完成，例如：
<link rel="stylesheet" media="only screen and (handheld)" href="example.css" />
source
我不明白为什么这不适用于 (min-width: 1200px)`（例如）。
通常 css 对于小屏幕来说会非常小，小屏幕使用了桌面版的大部分样式，隐藏了一些元素并调整了一些元素的大小。
如果您这样做，您的网站将不会响应。响应式说设计适应分辨率，不仅仅是设备，当桌面屏幕有 600 px 宽度时你必须显示平板电脑版本，不是吗？减少文件的最佳方法是在生产版本中将所有 css 缩小到一个文件中，而在开发版本中，您已将所有文件拆分 css
我想将我相当大的 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 唯一的解决方案。
编辑
请阅读问题 - 我想加载基于媒体查询的特定样式表。无论媒体查询属性如何，所有浏览器都会下载所有样式表，这违背了拥有仅移动样式表的意义！ 如何根据媒体查询只下载我想要的样式表？
尝试在 HTML 内完成，例如：
<link rel="stylesheet" media="only screen and (handheld)" href="example.css" />
source 我不明白为什么这不适用于 (min-width: 1200px)`（例如）。
通常 css 对于小屏幕来说会非常小，小屏幕使用了桌面版的大部分样式，隐藏了一些元素并调整了一些元素的大小。
如果您这样做，您的网站将不会响应。响应式说设计适应分辨率，不仅仅是设备，当桌面屏幕有 600 px 宽度时你必须显示平板电脑版本，不是吗？减少文件的最佳方法是在生产版本中将所有 css 缩小到一个文件中，而在开发版本中，您已将所有文件拆分 css