- max-width: 767px: Điều này thường được sử dụng để nhắm mục tiêu đến các thiết bị như điện thoại thông minh, bởi vì hầu hết chúng có độ rộng màn hình nhỏ hơn 768px.
- max-width: 768px: Điều này hữu ích khi bạn muốn styles của bạn áp dụng cho cả điện thoại và một số tablet nhất định (chẳng hạn như iPad khi ở kiểu dọc).
Các trang web lớn thường giải quyết vấn đề này bằng cách:
Thiết kế linh hoạt: Họ không chỉ dựa vào các breakpoints phổ thông như 768px, mà thay vào đó sử dụng một loạt các breakpoints để bao phủ một phạm vi rộng lớn hơn các kích thước màn hình và đảm bảo trải nghiệm người dùng đồng nhất.
Sử dụng màn hình Phân đoạn: Đôi khi họ thiết lập một loạt các phân đoạn media query để đối phó với cả điện thoại và tablet, ví dụ max-width: 767px cho điện thoại và min-width: 768px cho tablet.
Cách tiếp cận thông minh là áp dụng tiếp cận mobile-first trong thiết kế web và sử dụng min-width và max-width một cách linh hoạt để bảo đảm website của bạn có vẻ ngoài và cảm giác phản hồi tốt trên mọi thiết bị.