tgoop.com/frontendnoteschannel_ru/5165
Create:
Last Update:
Last Update:
Адаптивность через @media — привычная вещь, но неудобная: когда один компонент используется в разных местах, его поведение зависит от размера окна браузера, а не от его контейнера. В итоге — хаки и дублирование стилей.
.card .title {
font-size: 1rem;
}
@media (min-width: 768px) {
.card .title {
font-size: 2rem;
}
}.card {
container-type: inline-size;
container-name: card;
}
.title {
font-size: 1rem;
}
@container card (min-width: 400px) {
.title {
font-size: 2rem;
}
}Проблема: Если компонент .card вставить в узкий сайдбар на широком экране, стили могут «сломаться», так как адаптивность зависит от окна браузера, а не от контейнера. Теперь .title реагирует на размер контейнера, а не на размер вьюпорта. Это решение убирает все костыли и делает компоненты более гибкими.
Теперь можно создавать по-настоящему адаптивные компоненты без костылей. Поддержка в Chrome, Edge и Safari уже есть, так что пора пробовать в продакшене!
