响应式网页设计中的单个与多个样式表 [英] Single vs multiple stylesheets in responsive web design

问题描述

简而言之:

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

Should you use one or multiple stylesheets when doing responsive web design?

详细说明:

在响应式设计中，您往往有一个主要的 CSS 块，然后是其他部分和在到达某些断点时调整布局.您可以通过以下两种方式之一构建代码:

In responsive design, you tend to have one main chunk of CSS, then other bits and pieces to adjust the layout when it reaches certain breakpoints. You can structure your code one of two ways:

单个样式表

/* 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 请求.

It seems that using one stylesheet will reduce the number of HTTP requests, but you'll have a larger file which will contain code that might not be used by some clients. Multiple stylesheets seems to keep file sizes down, but then you have more HTTP requests.

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

When should you opt for each approach? How do the pros and cons of number of HTTP requests and file size stack up in practice?

推荐答案

样式表总是下载，无论当前媒体是screen、打印，或3D眼镜.

Stylesheets are always downloaded, regardless of the current media, whether it be screen, print, or 3D-glasses.

参见:为什么所有浏览器都下载所有 CSS 文件——即使是它们不支持的媒体类型?

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

So with that in mind, keeping them all in one stylesheet will reduce http requests, where as separate stylesheets will always create more requests with no benefit.

这篇关于响应式网页设计中的单个与多个样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！