Адаптивный дизайн

Веб-функции: Запросы контейнеров (размер) Малые, большие и динамические единицы области просмотра Соотношение сторон min(), max() и clamp() Единицы области просмотра

Общие рекомендации

  • Используйте запросы @container, чтобы создавать адаптивные макеты на основе компонентов, которые подстраиваются под размер родительского контейнера, а не области просмотра. Подробнее о стилях, зависящих от размера…
  • Используйте динамические единицы области просмотра (dvh, dvw) вместо vh/vw, чтобы макет не ломался, когда элементы интерфейса мобильного браузера (например, адресная строка) появляются или исчезают.
  • Используйте aspect-ratio для медиаэлементов (например, <img> и <video>), чтобы зарезервировать место во время загрузки и предотвратить Cumulative Layout Shift (CLS).

О том, как работают макеты адаптивного интерфейса (flexbox, сетка, единицы измерения запросов контейнера, единицы измерения области просмотра), читайте в статье Макеты CSS и адаптивный дизайн.

Адаптивная типографика

  • РЕКОМЕНДУЕТСЯ комбинировать в clamp() единицы, зависящие от области просмотра и шрифта, чтобы размер шрифта масштабировался в соответствии с размером области просмотра, но оставался в желаемом диапазоне. например clamp(2rem, 1rem + 5vw, 4rem). Отрегулируйте соотношение единиц измерения, связанных с областью просмотра и шрифтом, чтобы контролировать скорость изменения размера шрифта.
  • НЕ используйте vw для размера шрифта без clamp(), так как на некоторых экранах текст может быть слишком маленьким или слишком большим.

Чтобы масштабировать шрифт и интервалы в зависимости от размера контейнера, а не области просмотра, используйте адаптивное масштабирование.