响应式网页devise中的单一样式和多个样式表

简而言之：

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

详细：

在响应式devise中 ，您倾向于拥有一大块CSS，然后在其达到某个断点时调整布局。 您可以通过以下两种方式之一构build您的代码：

单个样式表

/* 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"> 

看起来，使用一个样式表将减lessHTTP请求的数量，但是您将有一个更大的文件，其中将包含可能不被某些客户端使用的代码。 多个样式表似乎保持文件大小，但是你有更多的HTTP请求。

你应该什么时候select每种方法？ HTTP请求数量和文件大小的优缺点在实践中如何堆积起来？

Answer 1

总是下载样式表，无论当前媒体如何，无论是screen ， print还是3D-glasses 。

请参阅： 为什么所有浏览器都下载所有的CSS文件 – 即使对于不支持的媒体types也是如此？

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