TGViewer
Веб-страница Веб-страница @tproger_web · 22.5K subscribers
Post #6515 1.43K
Когда в CSS нужны контейнерные запросы

Медиазапрос смотрит на окно браузера. Поэтому условие min-width: 1024px сработает на экране шириной 1920 пикселей даже для карточки шириной 300 пикселей. Тесному компоненту достанется раскладка для широкого экрана.

Контейнерный запрос проверяет ширину родительской обёртки. Порог 450 пикселей переводит карточку в горизонтальную раскладку. Такой компонент можно переносить в сайдбар, не переписывая условие под ширину окна.

В разборе Smashing Magazine тот же принцип применяют к шрифту: cqi вместе с clamp() масштабирует его относительно контейнера. Оставляйте медиазапросы для структуры страницы, а контейнерные используйте для карточек, форм и виджетов.
  • ❤ 4
More from @tproger_web
  1. Sep 20, 2026Как проверять CSS после рефакторинга с ИИ Пять ИИ-инструментов получили HTML и CSS карточк…
  2. Sep 20, 2026Как защитить списание кредитов в Django от гонки запросов У аккаунта один кредит. Два запр…
  3. Sep 20, 2026Как анимировать перестройку CSS Grid без JavaScript В разборе приёма содержимое каждой пли…
  4. Sep 19, 2026Как защитить API от повторной оплаты Клиент не получил ответ и повторил POST. Сервер мог у…
  5. Sep 19, 2026Как заблокировать отрисовку JavaScript, не останавливая HTML-парсер Когда компоненту нужно…
  6. Sep 19, 2026Почему box-shadow не заменяет outline для фокуса CSS-тень даёт больше свободы в оформлении…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →