CSSDùng container query khi component phải tự thích ứng theo bề rộng chỗ nó được đặt, chứ không theo bề rộng màn hình.
Ví dụ điển hình: một card dùng cả trong sidebar 320px lẫn vùng main 900px — media query không phân biệt được hai chỗ này vì viewport như nhau.
.card-wrap {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 420px) {
.card { display: grid; grid-template-columns: 120px 1fr; }
}Các điểm phải nắm:
- Truy vấn áp lên tổ tiên đã khai báo container, không phải chính phần tử đó → luôn cần một lớp bọc.
- container-type: inline-size chỉ chứa (contain) theo trục inline; size chứa cả hai trục nhưng khi đó chiều cao không còn tính theo nội dung — hay gây sập layout, ít dùng.
- Container đã khai báo sẽ tạo containment, kéo theo hệ quả: nó là chứa cho position: fixed bên trong, và tạo stacking context.
- Đơn vị truy vấn cqw, cqi, cqb cho phép co giãn theo container thay vì viewport.
Vẫn giữ media query cho những gì thực sự thuộc về trang: khung layout tổng, số cột trang, ẩn/hiện nav — những thứ phụ thuộc thiết bị chứ không phụ thuộc chỗ đặt component.