Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
317 views
in Technique[技术] by (71.8m points)

css - Single vs multiple stylesheets in responsive web design

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...