$ sudo teach IT

Все размеры в CSS — шрифты, отступы, ширины — задаются в каких-то единицах. От выбора единицы зависит, будет ли макет жёстко фиксированным или гибким, подстраивающимся под экран и настройки пользователя. Понимание разницы между px, %, em и rem — то, что отличает новичка, который «ставит числа наугад», от верстальщика, который осознанно строит адаптивный интерфейс.

После этого урока вы будете понимать, какая единица для чего подходит, и сможете задавать размеры так, чтобы страница вела себя предсказуемо.

Что уже умеем / что добавим

Вы задавали размеры в пикселях. Теперь разберём другие единицы и их отличия. В сквозном проекте мы сделаем размеры лендинга более гибкими: зададим базовый размер шрифта и переведём часть значений в относительные единицы.

Что вы узнаете в рамках статьи

  • Что такое пиксель и когда он уместен.
  • Как работают проценты и от чего они считаются.
  • Что такое em и относительно чего он вычисляется.
  • Что такое rem и чем он удобнее em.
  • Какую единицу выбирать в типичных случаях.

Ключевые термины

  • px — пиксель, абсолютная фиксированная единица.
  • % — процент от размера родительского элемента.
  • em — относительная единица, зависящая от размера шрифта элемента.
  • rem — относительная единица от размера шрифта корня страницы.
  • Корневой элемент — html, от него отсчитывается rem.

Пиксели

Пиксель (px) — абсолютная единица. Одно и то же значение в пикселях даёт одинаковый размер независимо от окружения:

.box {
  width: 300px;
  font-size: 16px;
}

Блок всегда будет шириной 300 пикселей, а шрифт — 16. Пиксели предсказуемы и просты, поэтому с них удобно начинать. Их минус — жёсткость: такой размер не подстраивается под настройки пользователя и размер экрана. Для рамок, мелких деталей и фиксированных элементов пиксели — хороший выбор.

Проценты

Процент (%) — относительная единица: значение считается от соответствующего размера родителя. Чаще всего проценты применяют к ширине:

.box {
  width: 50%;
  font-size: 16px;
}

Блок займёт половину ширины своего родителя — и если родитель станет шире или уже, колонка подстроится. Это основа гибких макетов: элементы задаются в долях, а не в жёстких числах. Проценты незаменимы, когда нужно, чтобы блок «тянулся» вместе с контейнером.

Единица em

em — относительная единица, привязанная к размеру шрифта самого элемента. 1em равен текущему font-size. Если шрифт элемента 20px, то 1em = 20px, а 1.5em = 30px:

.card {
  font-size: 20px;
  padding: 1.5em; /* 30px, потому что 1.5 × 20px */
}

Поле окажется 30 пикселей, потому что считается от шрифта карточки. Плюс em — отступы и размеры автоматически масштабируются вслед за шрифтом. Минус — em может «накапливаться» во вложенных элементах, из-за чего размеры иногда ведут себя неожиданно. Именно поэтому чаще предпочитают rem.

Единица rem

rem («root em») тоже относительная, но всегда считается от размера шрифта корневого элемента html, а не текущего. По умолчанию у html шрифт 16px, поэтому 1rem = 16px:

c
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;   /* 32px */
}

p {
  font-size: 1rem;   /* 16px */
}

Поскольку rem всегда отсчитывается от одной точки — корня, — он не накапливается и ведёт себя предсказуемо в любой вложенности. Это делает rem очень удобным для шрифтов и отступов: поменяв один базовый размер у html, вы пропорционально масштабируете весь сайт. Сегодня rem — самый рекомендуемый выбор для типографики.

Применяем в проекте

Сделаем размеры лендинга гибче. Зададим базовый размер шрифта корню и переведём размеры заголовков и отступы секций в rem, а ширину контента будем ограничивать позже процентами.

html {
  font-size: 16px;
}

h1 {
  font-size: 3rem;    /* 48px */
}

h2 {
  font-size: 2rem;    /* 32px */
}

.hero {
  padding: 4rem 1.25rem;  /* 64px по вертикали, 20px по бокам */
}

p {
  font-size: 1.125rem;    /* 18px */
  line-height: 1.6;
}

Внешне лендинг почти не изменится, но теперь его размеры завязаны на единый базовый размер. Достаточно поменять font-size у html — и все заголовки, отступы и текст пропорционально масштабируются. Это грамотная, современная основа, к которой стремятся в реальных проектах.

Частые ошибки

  • Всё подряд в px.
    Для шрифтов и отступов относительные rem гибче; пиксели оставьте деталям вроде рамок.
  • Проценты «непонятно от чего».
    Процент всегда считается от родителя — держите это в голове.
  • Накопление em при вложенности.
    Если размеры «поплыли», проверьте цепочку em; часто спасает переход на rem.
  • Путаница em и rem.
    em — от шрифта элемента, rem — от шрифта корня html.

Итоги

Отлично — теперь вы осознанно выбираете единицы! Вы разобрались, чем абсолютные пиксели отличаются от гибких процентов и относительных em и rem, и поняли, почему rem так удобен для типографики. Это знание выводит вашу вёрстку на новый уровень: размеры перестают быть случайными числами и становятся продуманной системой. Ваш лендинг получил гибкую, масштабируемую основу.

Вы почти у финиша раздела и всего курса — здорово держитесь! В следующем, заключительном уроке добавим лендингу фоновые изображения и заливки и наведём финальный лоск.

На следующий урок