Giá trị Điểm ngắt CSS tốt cho Thiết kế đáp ứng là gì?

Các giá trị điểm ngắt CSS tối ưu mà tôi sử dụng trong các dự án của mình

Trong khi thiết kế một trang web, tôi nhận thấy rằng tôi đang sử dụng một số giá trị khá ngẫu nhiên cho các điểm ngắt CSS của mình. Đôi khi một giá trị được làm tròn như 800 hoặc 1200, đôi khi là một giá trị cụ thể lên đến pixel như 672.

Tôi đã tìm kiếm các giá trị thích hợp để áp dụng cho các điểm ngắt của mình trong tương lai.

Tôi đã có một chút thời gian để tra cứu điều này, và tôi đã đi đến kết luận này.

Chúng tôi có 5 kích thước thiết bị chính cần lo lắng:

  • chân dung di động
  • cảnh quan di động
  • chân dung máy tính bảng
  • cảnh quan máy tính bảng
  • máy tính xách tay

Các thiết bị đó ánh xạ tới các giá trị pixel đó:

  • dọc trên điện thoại di động: nhỏ hơn 640px
  • ngang trên thiết bị di động:> 640px
  • chân dung máy tính bảng:> 768px
  • ngang máy tính bảng:> 1024px
  • máy tính xách tay:> 1280px

Tôi lấy những giá trị đó từMặc định Tailwind.

Tôi không phải là nhà thiết kế, vì vậy tôi không tham gia hàng ngày vào các phương pháp hay nhất, nhưng lần này tôi quyết định thiết kế thiết bị di động trước tiên.

Điều đó có nghĩa là CSS của tôi, không có bất kỳ truy vấn phương tiện nào, sẽ thiết kế cho trường hợp sử dụng dọc di động và sau đó thêm các điểm ngắt mà tôi sẽ thiết kế cho các thiết bị ngày càng lớn hơn, cấmmax-widthtừ các truy vấn phương tiện truyền thông.

Tôi nghĩ rằng tôi luôn đi theo con đường ngược lại: thiết kế cho màn hình lớn hơn, đó là thứ tôi sử dụng nhiều nhất và sau đó nhỏ hơn, nhưng thiết kế thiết bị di động trước tiên và sử dụngmin-widthcó vẻ như là giải pháp được chấp nhận và sử dụng nhiều nhất hiện nay.

Đây là những truy vấn phương tiện mà tôi sẽ sử dụng từ bây giờ:

@media (min-width: 640px) {

}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 1280px) {

}

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: