响应式网页设计中的单个vs多个样式表 [英] Single vs multiple stylesheets in responsive web 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 * /} 
  pre> 
 
 
 多个样式表
 
 
 
  ; link rel =stylesheetmedia =screenhref =main.css> 
< link rel =stylesheetmedia =only screen and（min-width：480px）href =480.css> 
< link rel =stylesheetmedia =only screen and（min-width：640px）href =640.css> 
< link rel =stylesheetmedia =only screen and（min-width：800px）href =800.css> 
  
似乎使用一个样式表会减少HTTP请求数，文件，其中将包含一些客户端可能不使用的代码。多个样式表似乎会减小文件大小，但是您有更多的HTTP请求。
 
 
 
您应该选择什么方法？ 
解决方案
样式表总是 
 下载，无论当前媒体，是否屏幕，打印或 3D眼镜。
 
 
 
请参阅：为什么所有浏览器都下载所有CSS文件 - 即使是他们不支持的媒体类型？ 
 
 
 
考虑到这一点，将它们全部保存在一个样式表中将减少http请求，因为单独的样式表将始终创建更多的请求，而不会带来任何好处。 
In short:

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

In detail:

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:

Single stylesheet
/* 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 */ }
Multiple stylesheets
<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">
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.

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?
解决方案
Stylesheets are always downloaded, regardless of the current media, whether it be screen, print, or 3D-glasses.

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

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.

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