Tổng quan
Kiểu nhận biết kích thước cho phép các thành phần thay đổi bố cục hoặc giao diện dựa trên không gian có sẵn, thay vì kích thước của toàn bộ màn hình. Điều này rất hữu ích cho các thành phần như thẻ hoặc thanh điều hướng có thể được đặt ở nhiều phần của bố cục (chẳng hạn như thanh bên hẹp hoặc khu vực chính rộng).
Bạn nên sử dụng truy vấn vùng chứa vì truy vấn này giúp các thành phần thực sự có tính mô-đun. Bạn không cần biết thành phần sẽ nằm ở đâu hoặc viết các truy vấn đa phương tiện phức tạp để xử lý mọi bố cục có thể.
Triển khai
1. Xác định vùng chứa
BẮT BUỘC: Trước tiên, bạn phải cho trình duyệt biết phần tử nào là vùng chứa cần đo lường.
.card-container {
/* Define the container type. Use 'inline-size' for width-based queries. */
/* You can also use 'size' for both width and height, but it requires explicit sizing. */
container-type: inline-size;
}
2. Áp dụng kiểu dựa trên kích thước vùng chứa
Sử dụng quy tắc @container để áp dụng kiểu khi vùng chứa đạt đến một kích thước nhất định.
/* Default styles for small containers (stacked layout) */
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
.card {
flex-direction: row;
align-items: center;
}
.card-image {
width: 150px;
height: 150px;
}
}
3. Hiện nội dung theo điều kiện
Bạn cũng có thể sử dụng truy vấn vùng chứa để ẩn hoặc hiện thông tin chi tiết bổ sung khi có thêm không gian.
.card-details {
/* Hide extra details by default in small spaces */
display: none;
}
@container (min-width: 600px) {
.card-details {
/* Show details when there is plenty of room */
display: block;
}
}
Chiến lược dự phòng
Đối với các trình duyệt không hỗ trợ truy vấn vùng chứa, phương pháp tốt nhất là sử dụng bố cục mặc định an toàn (như bố cục dọc xếp chồng) và cải tiến tăng dần bố cục đó bằng cách sử dụng truy vấn đa phương tiện nếu kích thước màn hình chung cho phép.
/* Default safe stacked layout */
.card {
display: flex;
flex-direction: column;
}
/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
.card {
flex-direction: row;
}
}
/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
@media (min-width: 600px) {
.card {
/* Reset media query fallback if needed, or let container query handle it */
flex-direction: column;
}
}
@container (min-width: 400px) {
.card {
flex-direction: row;
}
}
}
Điều này đảm bảo rằng người dùng trên các trình duyệt cũ vẫn có được bố cục hữu dụng, ngay cả khi bố cục đó không thích ứng hoàn hảo với mọi chiều rộng vùng chứa cụ thể.