Tôi có nên chia một tệp truy vấn phương tiện CSS lớn thành các tệp riêng biệt cho từng kích thước màn hình không?

Tôi đang làm việc trên một trang web thiết kế đáp ứng để cung cấp nội dung cho tất cả các kích thước màn hình. Tôi có các truy vấn phương tiện cho 5 "bước" khác nhau và tệp CSS khoảng 30 Kb.

Sẽ tốt hơn nếu chia phần này thành các tệp riêng biệt và làm cho chúng tương tự như sau:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

hoặc tôi nên giữ chúng trong một tệp CSS?

Cập nhật: Tôi chỉ muốn thêm, rằng mối quan tâm chính của tôi là tốc độ mở / kết xuất trang trình duyệt / thiết bị chéo, không dễ phát triển.

Tôi nghĩ rằng nó thực sự phụ thuộc vào những gì bạn thấy dễ dàng nhất để phát triển và những gì giúp bạn giữ một bản định kiểu gọn gàng.

Nhược điểm duy nhất tôi có thể nghĩ đến khi chia tách là thuộc tính của một thành phần sẽ xuất hiện trong tất cả các bảng định kiểu của bạn, bạn sẽ phải cập nhật 5 tệp riêng biệt để thay đổi nó (thay vì xuất hiện cạnh nhau ở một nơi).

Theo câu trả lời trên bài đăng này, các trình duyệt sẽ tải xuống tất cả các bảng định kiểu bất kể, vì vậy việc phân chia độ phân giải không phải là trình tiết kiệm băng thông: /programming/16657159/when-USE-media-queries-does-a -phone-load-không liên quan-truy vấn và hình ảnh

Nó hơi phụ thuộc vào những gì bạn muốn đạt được: bạn đang cố gắng làm cho trang của mình tải nhanh hơn hay bạn đang cố gắng để phát triển dễ dàng hơn?

Nếu bạn nhắm mục tiêu vào thứ hai, hơn bạn có thể sử dụng nhiều trang tính, nhưng đó là tất cả vấn đề ưu tiên. Tôi thấy nó dễ sử dụng nhất cho một tệp lớn vì điều này cung cấp cho bạn tổng quan về tất cả các kiểu bạn đã khai báo.

Nếu bạn muốn một trang tải nhanh hơn đặt cược tốt nhất của bạn sẽ là giảm thiểu số lượng yêu cầu, vì chi phí yêu cầu là khá lớn. Hơn nữa, bạn có thể giữ một phiên bản phát triển cho chính mình và phục vụ một css tối thiểu cho web (Tôi thấy YUI là một phương pháp tốt: http://www.refresh-sf.com/yui/ ).

Hơn nữa tôi sẽ cố gắng tối ưu hóa css chính nó. Bạn có thể thử hợp nhất các lớp rất giống nhau, ví dụ:

.bold-and-italic { font-weight: bold; text-style: italic; }

Có thể được chuyển đổi thành:

.bold { font-weight: bold; }
.italic { text-style: italic; }

Điều duy nhất là bạn phải thay đổi html một chút từ <span class="bold-and-italic">foo bar</span>thành<span class="bold italic">foo bar</span>

Tôi có thể khuyên bạn nên xem Bootstrap ( http://getbootstrap.com ), những người này đã làm rất tốt trong việc chia các lớp thành nhiều 'lớp con'.

Tôi hi vọng cái này giúp được.

Có lẽ tốt nhất là chỉ có một tệp CSS, nhưng để thu nhỏ và gzip nó. Giả sử 30KB của bạn là trước khi thực hiện điều đó, có thể bạn sẽ giảm kích thước tệp xuống còn khoảng 5KB với việc thu nhỏ (loại bỏ khoảng trắng) và gzipping.

Chia tách có thể sẽ giúp bạn tăng tốc hơn, nhưng chỉ trong một số điều kiện.

• Bạn phải đảm bảo rằng chỉ có một biểu định kiểu được tải mỗi lần - nếu không, bạn cần hai hoặc nhiều yêu cầu HTTP, có chính chúng, điều này ít nhất sẽ phủ nhận một phần lợi ích từ kích thước tệp nhỏ hơn. Để làm điều này, đó là không đủ để chỉ chia stylesheet và chèn nhiều <link>-tags với phương tiện truyền thông thuộc tính khác nhau, trình duyệt dường như để tải tất cả các <link>stylesheets ed không phụ thuộc vào truy vấn phương tiện truyền thông (nhờ @cimmanon cho thông tin này, không biết rằng) .
• Số lượng quy tắc CSS được chia sẻ giữa các biểu định kiểu phải nhỏ - nếu không, mỗi trong số nhiều biểu định kiểu sẽ cần chứa tất cả các quy tắc chung và do đó sẽ có kích thước gần như ban đầu.
• Bạn sử dụng bộ tiền xử lý CSS (hoặc một cái gì đó tương tự), do đó có thể quản lý để có cùng một đoạn mã trong 5 biểu định kiểu.

Ngoài ra: Đừng tối ưu hóa sớm. Chỉ làm như vậy nếu bạn có vấn đề về hiệu suất.

Bạn nên phân chia các tệp CSS của mình dựa trên các truy vấn phương tiện vì các tệp CSS bị chặn kết xuất.

Khi trình duyệt đang xây dựng DOM của bạn, trước tiên nó phải chờ và tải tất cả các tệp CSS của bạn. Bạn sẽ giảm thời gian tải trang nếu một số tệp CSS của bạn chỉ được tải dựa trên các truy vấn phương tiện nhất định.

Điều này cũng áp dụng cho việc thêm async vào thẻ script JavaScript; cựu .: <script src='myfile.js' async></script>.

DOM không phải đợi tệp JS của bạn tải. Chỉ thêm async nếu việc xây dựng DOM của bạn không cần bất kỳ JavaScript nào khi tải.

Tôi muốn nói điều này.

Đối với sản xuất, luôn luôn giữ chúng trong một tập tin; lý do là nó hiệu quả hơn cho trình duyệt và đó phải là mối quan tâm chính của bạn (IMO) khi chuyển từ phát triển sang sản xuất.

Phát triển một ấm cá khác nhau. Tôi có xu hướng phân tách các truy vấn Media để chúng theo bất kỳ yếu tố nào, ví dụ:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

Nói chung, nếu tôi thay đổi một yếu tố, tôi không muốn phải tìm kiếm khắp nơi cho CSS (mặc dù bạn có thể sử dụng một cái gì đó như grep ...).

Nhưng , một điều tôi muốn nói là nó đáng để xem xét chính trang web, quá trình phát triển và đáng tin cậy. Nếu bạn thực sự nghĩ rằng sẽ có giá trị tách chúng ra để sàng lọc các tệp dựa trên kích thước, hãy thử đi. Tạo một bản sao của trang web (nếu có thể), chơi xung quanh với bản sao - nếu nó dễ dàng hơn, hãy sử dụng nó. Bạn không cần tuân theo mô hình một kích cỡ phù hợp với tất cả các cách phát triển trang web.

Đơn giản: sử dụng 1 biểu định kiểu và chỉ cần thêm nhận xét cho chúng để giúp tìm và thay đổi các kiểu CSS dễ dàng hơn, vd:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

Nếu bạn muốn, bạn có thể sử dụng nhiều bảng định kiểu và gọi chúng cho từng kích thước cụ thể.

Tôi thà nhìn vào Bootstrap . Đây là 1 tệp CSS chứa tất cả CSS. Nó hoạt động trên gần 99% trình duyệt và cực kỳ nhạy.

Nhấp vào bản demo trực tiếp phóng to ( Ctrl += phóng to, Ctrl -= thu nhỏ, Ctrl 0= bình thường) hoặc mở trên điện thoại di động của bạn để xem cách hiển thị.