📁 Раздел: Раскладка⏱️ Время изучения: ~50 мин🎯 Сложность: Средняя
⚡ Кратко
Приставки: sm: md: lg: xl: 2xl: — «от и выше»,
max-* — «до», @sm: @md: — по ширине контейнера.
Брейкпоинты окна
Приставка
Медиазапрос
Ширина
sm:
@media (width >= 40rem)
640px
md:
@media (width >= 48rem)
768px
lg:
@media (width >= 64rem)
1024px
xl:
@media (width >= 80rem)
1280px
2xl:
@media (width >= 96rem)
1536px
max-sm: … max-2xl:
@media (width < …)
«до» соответствующей ширины
min-[720px]:
произвольное значение
любое
md:max-xl:
диапазон
768–1280px
Контейнерные запросы
Класс
Что делает
@container
объявить элемент контейнером запросов
@container/sidebar
именованный контейнер
@sm:, @md:, @lg:, @xl:
от ширины контейнера (24rem, 28rem, 32rem, 36rem)
@max-md:
до указанной ширины контейнера
@lg/sidebar:flex
правило по конкретному именованному контейнеру
@min-[400px]:
произвольная ширина контейнера
⚠️ Проверить по документации: шкала
контейнерных размеров (@3xs … @7xl) шире, чем
приведённые здесь четыре ступени — полный список смотрите в разделе
Responsive design документации.