CSSMedia queries = viewport-level: thay đổi layout tổng thể theo kích thước màn hình (sidebar collapse trên mobile, grid columns).
Container queries = component-level: component tự điều chỉnh layout dựa trên không gian được cấp, bất kể nằm ở đâu trên trang.
Kết hợp cả hai trong thực tế: media queries cho page layout, container queries cho reusable components (card hiển thị horizontal hay vertical tùy container width).
Container queries giải quyết vấn đề chính của media queries: cùng một component trong sidebar nhỏ và main content rộng cần layout khác nhau.
Media queries are based on viewport width, making them suitable for page-level responsive design — changing the overall layout when the screen size changes (e.g., collapsing a sidebar on mobile).
- Container queries are based on the parent container's size, making them ideal for component-level responsive design — a component adjusts its own layout based on the space it's given, regardless of where it's placed on the page.
- In practice, combine both: media queries for overall page layout (grid columns, sidebar visibility), container queries for reusable components (a card displaying horizontally or vertically depending on container width).
- Container queries solve the biggest limitation of media queries: the same component placed in a narrow sidebar and a wide content area needs different layouts.