EM CSS: Один размер шрифта для всех экранов

CSS (Cascading Style Sheets) – это язык, который используется для оформления веб-страниц, включая размещение текста, изображений, фона, шрифтов и других элементов на странице. С помощью CSS можно изменять цвет, размер и расположение элементов на странице, а также добавлять анимацию и интерактивность к странице.

В CSS существует несколько единиц измерения для задания размеров элементов, одной из которых является em. Единица em определяется размером шрифта родительского элемента, что позволяет делать масштабируемый интерфейс, при котором размеры элементов будут соответствовать размеру шрифта. Например, если размер шрифта родительского элемента равен 16px, то 1em будет равен 16px, 2em – 32px, и т.д.

Пример использования em:

css
.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* будет равен 30px (20px * 1.5) */
  margin-top: 1em; /* будет равен 20px (размер шрифта родителя) */
}

В данном примере мы задали размер шрифта для родительского элемента 20px, а для дочернего элемента – 1.5em, что будет соответствовать размеру шрифта 30px. Также мы задали верхний отступ для дочернего элемента, равный 1em, что будет соответствовать размеру шрифта родительского элемента, т.е. 20px.

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