CSSTheo nội dung, không theo thiết bị.
Lý do đơn giản: danh sách thiết bị đổi mỗi năm — iPhone SE 375px, iPhone Pro Max 430px, tablet gập, cửa sổ desktop chia đôi màn hình. Không có tập "kích thước chuẩn" nào ổn định để mà nhắm.
Cách làm thực tế:
1. Mở trang, kéo cửa sổ hẹp dần.
2. Đến chỗ layout bắt đầu vỡ — chữ dài quá một dòng, card chật, bảng tràn — đó là một breakpoint.
3. Đặt media query tại đó, làm tiếp cho tới hết.
/* breakpoint sinh ra từ chỗ card không còn đủ chỗ, không phải từ tên thiết bị */
.cards { display: grid; gap: 16px; }
@media (min-width: 34rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .cards { grid-template-columns: repeat(4, 1fr); } }Dùng rem cho breakpoint để ngưỡng co theo cỡ chữ người dùng đặt — người phóng to chữ sẽ chuyển sang bố cục hẹp sớm hơn, đúng như mong đợi.
Nhiều trường hợp còn không cần breakpoint nào:
.cards { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }Chốt: breakpoint theo nội dung còn hợp với container query — component tự đáp ứng theo chỗ nó được cấp, khi đó khái niệm "kích thước thiết bị" mất hẳn ý nghĩa.