Обзор
Резиновое масштабирование позволяет компонентам корректировать свои внутренние пропорции (например, размер шрифта и интервалы) в зависимости от текущих размеров. Это создает более целостный дизайн, чем переход между фиксированными контрольными точками.
Раньше для гибкого масштабирования использовались единицы области просмотра (масштабирование на основе размера экрана), а современные единицы запросов контейнера позволяют масштабировать компоненты относительно родительского контейнера. Это гарантирует, что компоненты будут выглядеть хорошо независимо от того, где они размещены в макете, что способствует лучшей изоляции компонентов и возможности повторного использования.
Реализация
1. Как определить контейнер
Чтобы использовать единицы измерения запросов к контейнеру, сначала нужно определить контекст контейнера в родительском элементе.
.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. Используйте единицы запроса контейнера
Используйте единицы измерения запросов контейнера (cqi, cqb и т. д.), чтобы задать размеры относительно размеров контейнера.
cqi: 1% от размера контейнера по строке (ширина в горизонтальных режимах письма).cqb: 1% от размера блока контейнера (высота в горизонтальных режимах письма).
Примечание. Контейнеры можно использовать непосредственно на любом ресурсе без правила запроса @container. Они автоматически разрешаются на основе ближайшего предка с определенным container-type.
.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. Ограничить значения с помощью clamp()
Чтобы размеры не становились слишком маленькими или слишком большими, используйте функцию CSS clamp(). Это влияет на возможность пользователя масштабировать или настраивать базовый размер шрифта. Чтобы текст соответствовал требованиям к специальным возможностям, максимальный размер не должен превышать минимальный более чем в 2,5 раза.
.component-title {
/* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
font-size: clamp(1rem, 5cqi, 2.5rem);
}
Резервные стратегии
Если браузер не поддерживает запросы контейнеров, необходимо предоставить резервный вариант с использованием единиц области просмотра или стандартных запросов медиа.
.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);
}
}
В этом случае текст будет масштабироваться в зависимости от ширины экрана, а не компонента. Проверьте, работает ли это в вашем случае.