Question

简而言之：

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

详细信息：

在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请求数量和文件大小的优缺点如何叠加？

Answer 1

无论当前媒体是screen，print还是3D-glasses，都会始终下载样式表。

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

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

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

1 个答案: