kiểm tra Responsive trong xây dựng web design

Khi thực hiện việc, bạn khả năng cao kiểm sát Responsive bằng cách co giãn kích thước trình chuẩn y bằng tay nhưng nó không được “logic” cho lắm. Mà mình sẽ khuyến khích các bạn tiêu dùng các dụng cụ giúp cho để khảo sát, một trong những phương tiện kiểm sát Responsive mà mình thích nhất đó là Resizer, siêu dễ tiêu dùng và gọn nhẹ. Hãy xem cách tiêu dùng bằng ảnh dưới:

Danh sách các kích thước màn hình vật dụng

Khi viết CSS cho giao diện Responsive, việc cần thiết nhất là bạn phải nắm được kích thước màn hình của các loại điện thoại thông dụng để có lẽ viết CSS được như yêu cầu và bảo đảm nó vận hành năng suất trên nhiều thiết bị, nhất là các vật dụng thông dụng. Bạn thường tham khảo các size chiều rộng của các vật dụng tại đây, nhưng đa phần một dự án bạn chỉ tốt nhất nên tạo các breakpoint CSS như sau:

  • max-width: 320px (điện thoại di động, hiển thị chiều dọc)
  • max-width: 480px (điện thoại di động, hiển thị chiều ngang)
  • max-width: 600px (máy tính bảng, hiển thị chiều dọc)
  • max-width: 800px (máy tính bảng, hiển thị chiều ngang)
  • max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
  • max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)
  • min-width: 1025px (từ size này trở lên là danh tặng desktop thông thường).

 

5/5 - (1 bình chọn)

Responsive Web Design Cẩm Nang Thiết kế Web

Lê Trương Tấn Lộc (webseowp.vn)

Với hơn 5 năm kinh nghiệm CSS, JS 8 năm thực chiến trong quản trị website tư vấn giải pháp đẩy top, Digital marketing tối ưu nhất cho doanh nghiệp.
Hiện đang là leader kinh doanh tại Siêu Tốc Việt.