Почему использовать em вместо px?

Неправильно утверждать, что один из вариантов лучше другого (или оба не получили бы своего назначения в спецификации). Стоит также отметить, что Stack Overflow активно использует единицы измерения в пикселях (px). Это не такой уж плохой выбор, как предполагает вопрос.

Определение единиц

• px — это абсолютная единица измерения (как in, pt или cm), которая равняется 1/96 дюйма (подробности позже). Поскольку это абсолютная единица, ее можно использовать всякий раз, когда вы хотите задать что-то определенного размера, а не пропорционально другим элементам, как размер окна браузера или размер шрифта.

  Как и все другие абсолютные единицы, единицы px не масштабируются в зависимости от ширины окна браузера. Поэтому, если весь ваш дизайн страницы использует абсолютные единицы, такие как px, а не %, он не будет адаптироваться к ширине браузера. Это не является intrinsically хорошим или плохим, это просто выбор, который дизайнер должен сделать между соблюдением точного размера и его жесткостью или возможностью адаптации, но с потерей точности. Обычно сайт содержит смесь объектов фиксированного и гибкого размера.

  Элементы фиксированного размера часто необходимо внедрять в страницу — такие как рекламные баннеры, логотипы или иконки. Это фактически гарантирует, что вам почти всегда понадобятся некоторые измерения в пикселях в дизайне. Например, изображения обычно масштабируются так, что каждый пиксель равен 1 px, поэтому, если ваш дизайн основывается на изображении, вам понадобятся единицы px. Использование px также очень удобно для точного задания размера шрифта и ширины рамок, где из-за округления имеет смысл использовать px для большинства экранов.

  Все абсолютные измерения жестко связаны друг с другом; то есть 1in всегда будет 96px, так же как 1in всегда будет 72pt. (Обратите внимание, что 1in почти никогда не является физическим дюймом, когда речь идет о медиа на экране). Все абсолютные измерения предполагают номинальное разрешение экрана 96ppi и номинальное расстояние просмотра для настольного монитора, и на таком экране один px будет соответствовать одному физическому пикселю на экране, и один in будет равен 96 физическим пикселям. На экранах с сильным отличием в плотности пикселей или расстоянии просмотра, или если пользователь увеличил масштаб страницы с помощью функции масштабирования браузера, px больше не будет обязательно соотноситься с физическими пикселями.

• em — это не абсолютная единица, а единица, которая зависит от текущего выбранного размера шрифта. Если вы не переопределили стиль шрифта, установив его размер с помощью абсолютной единицы (например, px или pt), это будет зависеть от выбора шрифтов в браузере или ОС пользователя, если таковые были сделаны, поэтому не имеет смысла использовать em в качестве общей единицы длины, кроме случаев, когда вы хотите, чтобы что-то масштабировалось в зависимости от размера шрифта.

  Используйте em, когда вы конкретно хотите, чтобы размер чего-либо зависел от текущего размера шрифта.

• rem похож на em, но он относителен к базовому размеру шрифта документа (конкретно, корневого элемента), а не к размеру шрифта текущего элемента.

• % также является относительной единицей, в данном случае относительно высоты или ширины родительского элемента. Они являются хорошей альтернативой единицам px для таких вещей, как общая ширина дизайна, если ваш дизайн не зависит от определенных пиксельных размеров для установки своего размера.

  Использование единиц % в вашем дизайне позволяет вашему дизайну адаптироваться к ширине экрана/устройства, тогда как использование абсолютной единицы, такой как px, этого не делает.

• vh, vw, vmin и vmax являются относительными единицами, подобно %, но они зависят от размера viewport (размер видимой области окна), а не от родительского элемента. Соответственно, они зависят от высоты, ширины, меньшего и большего из двух параметров viewport.

Наиболее популярный ответ от thomasrutter здесь вполне верен относительно em, но совершенно неправ по поводу размера пикселя. Хотя это старый вопрос, я не могу оставить его без обсуждения.

Компьютерный экран обычно НЕ имеет разрешения 96dpi! (Или ppi, если быть педантичным.)

Пиксель НЕ имеет фиксированного физического размера.

(Да, он фиксирован только для одного экрана, но на следующем экране размер пикселя, скорее всего, будет больше или меньше, и уж точно НЕ 1/96 дюйма.)

Доказательство

Нарисуйте линию длиной 960 пикселей. Измерьте ее физической линейкой. Она 10 дюймов? Нет..?

Подключите свой ноутбук к телевизору. Линия теперь 10 дюймов? Все еще нет?

Покажите линию на своем iPhone. Размер по-прежнему тот же? Почему?

Кто, черт возьми, изобрел миф о 96dpi для компьютерных экранов?

(Некоторые религии оперируют мифом о 72dpi. Но он тоже совершенно неверен.)

Это полезно для всего, что должно изменять размеры в зависимости от размера шрифта. Особенно это актуально для браузеров, которые реализуют масштабирование за счёт изменения размера шрифта. Если вы зададите размеры всех своих элементов в em, они будут автоматически масштабироваться вместе со шрифтом.

Используйте px для точного размещения графических элементов. Он предоставляет пиксельную точность, что позволяет добиться необходимой точности в дизайне. Используйте em для измерений, связанных с позиционированием и отступами вокруг текстовых элементов, таких как line-height и аналогичные свойства. В отличие от px, значения в em могут динамически изменяться в зависимости от используемого шрифта, что делает их более гибкими при адаптивной верстке.

Конечно! Вот перевод вашего вопроса на русский язык в стиле ответа, как на StackOverflow:

Вопрос:

У меня есть CSS-код, и я хочу установить базовый размер шрифта для всего тела документа, чтобы другие размеры шрифтов изменялись пропорционально этому значению. Вот пример:

body { font-size: 10px; } /* поддерживаем 10px для всех размеров ниже, изменяя это значение, остальные размеры меняются, чтобы, например, составлять 1.4 от этого значения */

#1 { font-size: 1.2em; } /* 12px */
#2 { font-size: 1.4em; } /* 14px */
#3 { font-size: 1.6em; } /* 16px */
#4 { font-size: 1.8em; } /* 18px */
#5 { font-size: 2em; } /* 20px */

Поскольку я изменяю значение в body, остальные размеры шрифтов автоматически подстраиваются под заданное базовое значение. Например:

10 × 2 = 20
10 × 1.6 = 16 и т. д.

А если я установлю базовое значение как 8px, то получится:

8 × 2 = 16
8 × 1.6 = 12.8 // может быть округлено браузером

Как мне правильно реализовать эту логику?

Ответ:

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

Если хотите, чтобы базовый размер шрифта был гибким, установите шрифт для <html> или <body> в px или rem, а для остальных элементов используйте em. Например:

html {
    font-size: 10px; /* Это базовый размер */
}

body {
    font-size: 1rem; /* Будет равен 10px */
}

#1 { font-size: 1.2em; } /* 12px */
#2 { font-size: 1.4em; } /* 14px */
#3 { font-size: 1.6em; } /* 16px */
#4 { font-size: 1.8em; } /* 18px */
#5 { font-size: 2em; } /* 20px */

Теперь, если вы измените font-size в html, все остальные размеры будут изменяться соответственно. Например, если вы установите font-size: 8px;, тогда:

8 × 2 = 16
8 × 1.6 = 12.8 // также будет округлено браузером

Таким образом, вы сможете легко управлять размерами шрифтов, меняя только одно значение!