3

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

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

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

4

1 回答 1

3

对于智能手机等，您可以将媒体查询从 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]-->
于 2013-02-14T14:06:37.063 回答