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 quan trọng 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ó thể viết CSS được như ý và chắc chắn nó hoạt động tốt trên nhiều thiết bị, nhất là các thiết bị thông dụng.

Bạn có thể tham khảo các size chiều rộng của các thiết bị tại đây, nhưng đa phần một dự án bạn chỉ cầ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 cho desktop thông thường).

/* Các CSS này dành cho toàn bộ website và desktop */ body {    background: #fff;    color: 333; }   /* Dành cho điện thoại */ @media all and (max-width: 480px) {   }   /* Dành cho máy tính bảng */ @media all and (max-width: 1024px) { }