Độc thân vs nhiều stylesheets trong thiết kế web đáp ứng

Question

Nói tóm lại:

bạn nên sử dụng một hoặc nhiều stylesheets khi thực hiện thiết kế web đáp ứng?

Cụ thể:

Trong responsive design, bạn có xu hướng để có một đoạn chính của CSS, sau đó bit và miếng khác để điều chỉnh cách bố trí khi nó đạt breakpoint nhất định. Bạn có thể cấu trúc mã của bạn một trong hai cách:

Độc 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 */ } 

Nhiều 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"> 

Có vẻ như rằng việc sử dụng một kiểu sẽ làm giảm số lượng yêu cầu HTTP, nhưng bạn sẽ có một tệp lớn hơn sẽ chứa mã có thể không được sử dụng bởi một số ứng dụng khách. Nhiều bảng định kiểu dường như giảm kích thước tệp nhưng sau đó bạn có nhiều yêu cầu HTTP hơn.

Khi nào bạn nên chọn tham gia cho mỗi phương pháp tiếp cận? Làm thế nào để ưu và khuyết điểm của số lượng yêu cầu HTTP và kích thước tập tin xếp chồng lên nhau trong thực tế?

Answer 1

Stylesheets là luôn tải về, không phụ thuộc vào phương tiện truyền thông hiện nay, cho dù đó là screen, print, hoặc 3D-glasses.

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

Vì vậy, với ý nghĩ đó, giữ cho chúng tất cả trong một stylesheet sẽ giảm yêu cầu http, nơi như stylesheets riêng sẽ luôn tạo ra nhiều yêu cầu không có lợi ích.