响应式网页设计中的单个样式表与多个样式表

Posted 2023-03-06

【中文标题】响应式网页设计中的单个样式表与多个样式表

【英文标题】：Single vs multiple stylesheets in responsive web design

【发布时间】：2012-01-29 10:07:17

【问题描述】：

简而言之：

在进行响应式网页设计时应该使用一个还是多个样式表？

详细说明：

在responsive design 中，您倾向于拥有一个主要的 CSS 块，然后在到达某些断点时调整布局的其他点点滴滴。您可以通过以下两种方式之一来构建您的代码：

单个样式表

/* Main CSS */

@media only screen and (min-width: 480px)  /* CSS */ 
@media only screen and (min-width: 640px)  /* CSS */ 
@media only screen and (min-width: 800px)  /* CSS */ 

多个样式表

<link rel="stylesheet" media="screen" href="main.css">
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css">
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">

似乎使用一个样式表会减少 HTTP 请求的数量，但是您将拥有一个更大的文件，其中包含一些客户端可能不会使用的代码。多个样式表似乎可以减小文件大小，但是您有更多的 HTTP 请求。

您应该何时选择每种方法？在实践中，HTTP 请求数量和文件大小的优缺点如何叠加？

【问题讨论】：

处理 HTTP 请求（往返）或处理超过必要的 CSS 文件需要更长的时间？

在大多数样式表中，文件大小相对较小。即使是 50K 的 LARGE css 文件也可能是您在性能优化方面最不必担心的问题。

【参考方案1】：

样式表总是被下载，不管当前的媒体是screen、print还是3D-glasses。

见：Why do all browsers download all CSS files - even for media types they don't support?

因此，考虑到这一点，将它们全部放在一个样式表中会减少 http 请求，而单独的样式表总是会创建更多请求而没有任何好处。

【讨论】：

为了理智，您可以使用单独的文件进行开发，并在推送代码之前将它们连接/最小化作为构建过程的一部分。见这里：***.com/questions/702907/…

HTTP 开销仍然是 HTTP/2 的问题吗？ smashingmagazine.com/2016/02/getting-ready-for-http2/…