320 và lên khung di động - Tại sao các bảng định kiểu bắt đầu ở mức 480?

Question

Tôi đã chỉ cần tải 320 and up cho thiết kế đáp ứng, các stylesheets được chia như sau:

• 480.css
• 600.css
• 768.css
• 992.css
• 1382 .css

Và print.css, style.css và 2x.css

Tôi không hiểu tại sao không phải là biểu định kiểu 320.css hoặc tôi nên sử dụng style.css cho độ phân giải đó?

Answer 1

Không, bạn nói đúng. Bất cứ điều gì đó là DƯỚI 480 sẽ được tải styles.css cho các truy vấn phương tiện truyền thông, sự giúp đỡ của min-width cài đặt trên phương tiện truyền thông truy vấn:

<!-- For all browsers --> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="stylesheet" media="print" href="css/print.css"> 
<!-- For progressively larger displays --> 
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="css/480.css"> 
<link rel="stylesheet" media="only screen and (min-width: 600px)" href="css/600.css"> 
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css/768.css"> 
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="css/992.css"> 

Vì vậy, với chiều rộng thiết bị, thiết kế cho 0 - 480 (bao gồm cả 320px) sẽ đi vào style.css

480 để 600 = 480.css

600 để 768 = 600.css

768 để 992 = 768.css

992+ = 992.css

Nhưng nếu bạn muốn có nhiều điều khiển tinh hạt so với độ phân giải 320 bạn có thể thêm một truy vấn phương tiện truyền thông:

<link rel="stylesheet" media="only screen and (min-width: 320px)" href="css/320.css">

và sau đó tạo ra các 320.css stylesheet trong thư mục css. Trang tính này sẽ tốt cho các độ phân giải 320 - 480. Điều đó có nghĩa là bây giờ mọi thứ nhỏ hơn 320 sẽ tải style.css.

Tôi nghĩ rằng ý tưởng rời độ phân giải đó ra là bạn muốn tạo ra một số bố trí chất lỏng hoặc linh hoạt mà sẽ làm việc cho cả hai Nghị quyết ...