Tổng quan
Tính năng điều chỉnh tỷ lệ linh hoạt cho phép các thành phần điều chỉnh tỷ lệ bên trong (như cỡ chữ và khoảng cách) dựa trên kích thước hiện tại. Điều này giúp tạo ra một thiết kế gắn kết hơn so với việc chuyển đổi giữa các điểm ngắt cố định.
Mặc dù trước đây, việc điều chỉnh tỷ lệ linh hoạt được thực hiện bằng cách sử dụng đơn vị khung nhìn (điều chỉnh tỷ lệ dựa trên kích thước màn hình), nhưng các đơn vị truy vấn vùng chứa hiện đại cho phép các thành phần điều chỉnh tỷ lệ tương ứng với vùng chứa mẹ. Điều này đảm bảo các thành phần trông đẹp mắt bất kể vị trí của chúng trong bố cục, giúp cải thiện khả năng tách biệt và khả năng sử dụng lại thành phần.
Triển khai
1. Xác định vùng chứa
Để sử dụng đơn vị truy vấn vùng chứa, trước tiên, bạn phải xác định bối cảnh vùng chứa trên một phần tử mẹ.
.component-wrapper {
/* Define the container type. Use 'inline-size' for width-based scaling. */
/* You can also use 'size' for both width and height, but it requires explicit sizing. */
container-type: inline-size;
/* Optional: Name the container for specific targeting */
container-name: fluid-card;
}
2. Sử dụng đơn vị truy vấn vùng chứa
Sử dụng đơn vị truy vấn vùng chứa (cqi, cqb, v.v.) để đặt kích thước tương ứng với kích thước của vùng chứa.
cqi: 1% kích thước cùng dòng của vùng chứa (chiều rộng trong chế độ viết ngang).cqb: 1% kích thước khối của vùng chứa (chiều cao ở chế độ viết ngang).
Lưu ý: Bạn có thể sử dụng trực tiếp các đơn vị vùng chứa trên bất kỳ thuộc tính nào mà không cần quy tắc truy vấn @container. Các giá trị này tự động phân giải dựa trên thành phần cấp trên gần nhất có container-type được xác định.
.component-title {
/* Scale font size based on container width */
/* 10cqi means 10% of the container's width */
font-size: 10cqi;
}
.component-body {
/* Scale padding based on container width */
padding: 5cqi;
}
3. Giới hạn giá trị bằng clamp()
Để ngăn kích thước trở nên quá nhỏ hoặc quá lớn, hãy sử dụng hàm CSS clamp(). Điều này ảnh hưởng đến khả năng thu phóng hoặc điều chỉnh cỡ chữ cơ bản của người dùng. Để đảm bảo văn bản đáp ứng các nguyên tắc về hỗ trợ tiếp cận, kích thước tối đa không được lớn hơn 2,5 lần kích thước tối thiểu.
.component-title {
/* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
font-size: clamp(1rem, 5cqi, 2.5rem);
}
Chiến lược dự phòng
Nếu trình duyệt không hỗ trợ truy vấn vùng chứa, bạn nên cung cấp một phương án dự phòng bằng cách sử dụng đơn vị khung nhìn hoặc truy vấn phương tiện chuẩn.
.component-title {
/* Fallback for browsers that do not support container units */
font-size: clamp(1rem, 5vw, 2.5rem);
}
@supports (font-size: 1cqi) {
.component-title {
/* Use container units where supported */
font-size: clamp(1rem, 5cqi, 2.5rem);
}
}
Phương án dự phòng này đảm bảo văn bản vẫn điều chỉnh theo tỷ lệ, nhưng sẽ dựa trên chiều rộng màn hình thay vì chiều rộng của thành phần. Bạn nên kiểm thử để xác minh rằng giải pháp này hoạt động trong trường hợp sử dụng của bạn.