Question

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

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

我正在考虑通过媒体查询编写CSS文件，其中单独的媒体查询重叠。我怎样才能减少臃肿和膨胀当只有一小段文件代码与设备本身相关时，不必将200kb CSS文件发送到智能手机或平板电脑？

Answer 1

对于智能手机等，您可以将媒体查询从with-in 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]-->

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

1 个答案: