CSSKhác nhau ở cái được đo: media query đo viewport, container query đo khối cha.
/* media query: bố cục TRANG đổi theo màn hình */
@media (min-width: 1024px) {
.layout { grid-template-columns: 240px 1fr; }
}
/* container query: COMPONENT đổi theo chỗ nó được cấp */
.card-wrap { container-type: inline-size; }
@container (min-width: 400px) {
.card { grid-template-columns: 120px 1fr; }
}Vấn đề mà media query không giải được: cùng một card đặt trong sidebar 300px và trong cột nội dung 900px. Viewport giống hệt nhau, nên media query cho ra cùng một kết quả — trong khi hai chỗ cần bố cục khác nhau.
Cách chia việc trong thực tế:
| Việc | Dùng |
|---|---|
| Khung trang, sidebar đóng/mở, số cột tổng thể | media query |
| Component tái sử dụng ở nhiều vị trí | container query |
| Chế độ tối, giảm chuyển động, in ấn | media query (không có bản container) |
Hai loại bổ sung cho nhau, không thay thế: media query dựng khung, container query lo từng component bên trong.
Lưu ý: container-type: inline-size đặt lên chính element đang style thì query không bao giờ khớp — element không thể tự truy vấn kích thước của chính nó. Luôn cần một lớp bọc ngoài.
Chốt: với thư viện component dùng chung, container query là thứ khiến component thật sự "cắm đâu cũng đúng" — đó là lý do nó được xem là thay đổi lớn nhất của CSS layout kể từ Grid.