đánh giá Responsive trong gây dựng web design

Khi làm việc, bạn có thể đánh giá Responsive bằng cách co giãn kích thước trình duyệt 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 phương tiện hỗ trợ để kiểm 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, rất dễ dàng 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 thiết bị

Khi viết CSS cho giao diện Responsive, việc rất 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ư mong muốn và bảo đảm nó vận hành hiệu quả trên đa dạng đồ vật, nhất là các đồ vật thông dụng. Bạn khả năng cao tham khảo các size chiều rộng của các đồ vật tại đây, nhưng đa phần một dự án bạn chỉ cần phải tạo các breakpoint CSS giống 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 đưa cho desktop thông thường).