我应该如何划分 CSS 文件以支持多个设备？答案

【问题标题】：How should I divide up CSS files to support multiple devices?我应该如何划分 CSS 文件以支持多个设备？
【发布时间】：2013-01-30 08:10:05
【问题描述】：

我正在为我们的网站重新编写 CSS，因为前一个变得非常臃肿（其中一个 CSS 文件大约有 180kb）。这正常吗？

我有兴趣找出为网站存储 CSS 代码的最高效的方法。由于当今设备的性质，我认为不可能编写针对设备的媒体查询（例如 responsive.smartphone.landscape、responsive.tablet.portrait 等）。此外，使用断点方法，很多媒体查询会重叠。

我正在考虑通过媒体查询编写 CSS 文件，并为重叠的媒体查询使用单独的文件。当只有一小部分文件代码与设备本身相关时，如何减少臃肿且不必将 200kb CSS 文件发送到智能手机或平板电脑？

【问题讨论】：

180kb 听起来像是 50% 不必要的东西；) 您是否考虑过重构代码，例如删除死代码和过时的兼容性声明（前缀边框半径）？

标签： css responsive-design media-queries device-orientation

【解决方案1】：

对于智能手机等，您可以将媒体查询从 css 文件中的内部移动到链接元素，如下所示。这样，您只需为每个加载一个 css 文件。

<link rel='stylesheet' media='screen and (max-width: 320px)' href='css/mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 321px) and (max-width: 768px)' href='css/tablet.css' />
<link rel='stylesheet' media='screen and (min-width: 769px)' href='css/desktop.css' />

我不认为 IE8 或更低版本将支持这样的媒体查询，因此您还应该提供一个后备：

<!--[if lte IE 8]>
<link rel='stylesheet' media='screen' href='css/desktop.css' />
<![endif]-->

【讨论】：