Các kích thước khung nhìn thường xuyên nhất để sử dụng trong thiết kế đáp ứng là gì?

8

Tôi thấy các đề xuất khác nhau từ rất chi tiết (như ở đây ) đến ngắn gọn hơn, như google ( ở đây ). Vì vậy, tôi tự hỏi những kích thước phù hợp nhất được sử dụng màn hình @media là gì.

responsive-webdesign media-queries

— cá biển
nguồn

7

Đây có thể không phải là một thống kê của người Viking, nhưng hãy xem Twitter Bootstrap đang bắt đầu được sử dụng rất nhiều.

https://github.com/twitter/bootstrap/blob/master/less/responsive.less

Nói ngắn gọn:

<= 767px
768px - 979px
980px - 1199px
> = 1200px

— sebastien
nguồn

7

Tôi đoán điều này phụ thuộc vào thiết kế, có thể khác nhau ở mỗi bản dựng. Nó cũng phụ thuộc nếu bạn sử dụng chất lỏng 100% hoặc thay đổi điểm dừng.

Tôi có xu hướng sử dụng một số điều sau đây, nói chung, kích thước lớn không thay đổi nhiều giữa các điểm dừng:

@media screen and (min-width:320px){} // mobile portrait
@media screen and (min-width:480px){} // mobile landscape
@media screen and (min-width:768px){} // ipad portrait
@media screen and (min-width:1024px){} // browser, ipad landscape
@media screen and (min-width:1200px){} // browser
@media screen and (min-width:1600px){} // browser

Không có điểm nào cố gắng để bao gồm tất cả các độ phân giải Android vv khác nhau ... có rất nhiều.

Ngoài ra, đôi khi các điểm dừng không kích hoạt trên kích thước thực tế do thanh cuộn, mỗi trình duyệt có các quy tắc khác nhau. Có thể là khôn ngoan để cắt 20px mỗi @media để đảm bảo chúng kích hoạt. Đôi khi tôi trao đổi độ rộng tối thiểu: 320px cho chiều rộng tối đa: 480px, vì dưới 320 không có gì có thể được hiển thị.

— DBUK
nguồn