Адаптивная вёрстка: медиазапросы, относительные единицы

Подстраивай интерфейсы под любой размер экрана с подходом mobile-first, медиазапросами и единицами rem, % и vw.

9 мин · 3 вопросов

Профессиональный подход - mobile-first: сначала ты пишешь стили для маленького экрана, а затем улучшаешь раскладку по мере роста места, используя медиазапросы min-width. Базовый CSS остаётся простым, и каждая контрольная точка добавляет только то, что действительно меняется.

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Что до единиц, забудь про пиксели в типографике. 1rem равен размеру шрифта корневого элемента (по умолчанию 16px) и, главное, уважает настройку размера текста, которую пользователь выбрал в браузере. Слабовидящий пользователь, поставивший шрифт 20px, увидит, как весь твой сайт масштабируется пропорционально, - при условии, что ты использовал rem.

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

.section {
  padding: 4rem 1.5rem;
}

Для ширины комбинируй относительные единицы: %, чтобы занять долю родителя, max-width, чтобы ограничить её на больших экранах, vw для размеров, привязанных к ширине области просмотра (1vw равен 1% от неё). Функция clamp(min, ideal, max) создаёт плавные значения, которые подстраиваются без единого медиазапроса, - идеально для крупных заголовков.

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. В подходе mobile-first какой медиазапрос ты используешь, чтобы нацелиться на большие экраны?
   • @media (max-width: 768px)
   • @media (min-width: 768px)
   • @media (device: desktop)
2. Чему по умолчанию соответствует 1rem?
   • 10 пикселям, фиксированному значению из стандарта CSS
   • Размеру шрифта родительского элемента
   • Размеру шрифта корневого элемента, по умолчанию 16px
3. Чему равно 50vw?
   • 50% ширины области просмотра
   • 50% ширины родительского элемента
   • 50 пикселям независимо от окна