В чем разница между REM, EM и PX?
В этой статье мы поговорим о REM, EM и Px. Что такое и почему мы используем единицы рем?
Что такое REM в CSS?
Rem (корень em) означает root element's font-size .
Размер шрифта/текста корневого элемента можно использовать для определения REM. Это означает, что 1rem означает общий размер шрифта элемента html, для которого по умолчанию установлено значение 16px в большинстве браузеров. В результате, даже если вы не знаете, какой будет размер шрифта по умолчанию, единицы rem полезны для масштабирования элементов CSS по отношению к размеру корневого элемента.
Почему мы используем единицы бэр?
Как указывалось ранее, единицы rem обозначают размер корневого элемента. Поскольку пользователь может изменить размер этого элемента по умолчанию в настройках своего браузера, веб-страница может масштабироваться в соответствии с его предпочтениями.
Однако использование absolute units, таких как пиксели, создает барьеры доступности. Пиксели переопределяют основной размер шрифта документа, поэтому предпочтения пользователя игнорируются. Поэтому по возможности используйте единицы rem для любых масштабируемых элементов.
Размер шрифта в бэрах.
Основным недостатком использования rem для определения размера шрифта является то, что значения трудно использовать. Давайте посмотрим на некоторые знакомые размеры шрифта, выраженные в rem, при условии, что базовый размер равен 16px:
Синтаксис:
:root {
font-size : 1rem;
}
Что такое EM в css?
Эм – это единица измерения CSS, которая измеряет размер шрифта/размер текста от верхнего края заглавных букв до нижнего нижнего выносного элемента шрифта. Эм была названа потому, что изначально была равна ширине заглавной буквы М.
Note:- Когда в свойстве font-size используются единицы EM, размер связан с размером шрифта родителя. При использовании с другими характеристиками он связан с размером шрифта элемента.
В этом случае первый оператор использует родительскую ссылку.
Почему мы используем EM?
Основной причиной использования em или процентов является предоставление пользователю возможности регулировать размер текста без нарушения макета.
Размер шрифта в единицах em.
Размер шрифта для масштабируемого текста выражается в em. Один em равен 16px или 12pt по умолчанию. Его значение пропорционально размеру шрифта родительского элемента. Синтаксис
Свойство CSS font-size (em) имеет следующий синтаксис:
Синтаксис:
:root {
font-size : 1em;
}
Что такое PX в Css?
Он не связан с текущим шрифтом и редко связан с физическими сантиметрами или дюймами. Единица пикселей разработана так, чтобы быть маленькой, но видимой, что позволяет отображать горизонтальную линию шириной 1px с острыми краями (без сглаживания)
Почему мы используем px в css?
Поскольку атрибуты px были стандартом де-факто, они используются в большинстве примеров CSS в Интернете. По идее, можно было использовать pt, in и множество других единиц измерения, но они плохо обрабатывали небольшие значения, вынуждая вас прибегать к фрагментам, которые требовали гораздо больше времени для ввода и были более сложными для анализа. Если вам нужна тонкая рамка, вы можете использовать 1px с px, но с pt вам придется использовать 0.75pt для согласованных результатов, что неудобно.
Свойство CSS font-size (px) имеет следующий синтаксис:
Синтаксис:
:root {
font-size : 20px;
}
Разница между REM, EM и PX?
Первоначально опубликовано на Simplified Dev 7 мая 2023 г.
