Tuthiterv rem что это

Единицы измерения CSS — PX, EM, REM, %, VW, VH, VMIN, VMAX, FR, EX, CH

Абсолютная единица — не зависит от значений других свойств. Ее можно назвать еще фиксированной или окончательной.

Относительная единица — зависит от того или иного значения других свойств.

PX — пиксели

Абсолютная (фиксированная) единица. Значение заданное в пикселях (px), четкое и понятное.

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

Остальные единицы, так или иначе пересчитываются браузером все равно в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px.

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся!
 Ставь лайк!
 И комментарий напиши!

Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 20px;)
Живи, а работай в свободное время! (задан font-size: 17.5px;)
Подписывайся! (наследует font-size: 17.5px;)
Ставь лайк! (задан font-size: 14.7px;)
И комментарий напиши! (задан font-size: 25px;)
width: 200px;
height: 200px;
padding: 15px;

Преимущества

Чёткость, понятность, простота использования.
Подходит для начинающих.

Недостатки

По сравнению с другими, относительными единицами это усложняет нам работу при адаптиве, а также снижает доступность нашей верстки, запрещая пользователю менять настройки в браузере

EM – относительна размеру шрифта

Относительная единица. Размер формируется относительно текущего или унаследованного размера шрифта (font-size).
1em равен значению font-size.

Как мы знаем, свойство размера шрифта font-size наследуется потомками. Поэтому, указывая тот или иной размер в EM нужно четко понимать какой размер шрифта влияет на данный элемент.
Как и пиксели, значение EM можно указывать дробные.

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся!
 Ставь лайк!
 И комментарий напиши!

Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 1em; 1*16=16px)
Живи, а работай в свободное время! (задан font-size: 1.5em; 1.5*16 = 24px)
Подписывайся! (наследует font-size: 1.5em; 1.5*16 = 24px)
Ставь лайк! (задан font-size: 1.5em; 1.5*24 = 36px)
И комментарий напиши! (задан font-size: 0.8em; 0.8*24=19.2px)
Размер шрифта
по умолчанию 16px
width: 12.5em;
height: 12.5em;
padding: 0.9375em;

0.9375 * 16 = 15px

Размер шрифта
задан 20px (font-size:20px;)
width: 12.5em;
height: 12.5em;
padding: 0.9375em;
font-size: 20px;

0.9375 * 20 = 18.75px

Преимущества

Относительность EM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для указания размеров зависящих от размера шрифта. Также используется в медиа запросах.

Недостатки

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

REM — относительна размеру шрифта браузера

Относительная единица. Размер формируется относительно размера шрифта (font-size) в теге или браузера по умолчанию.
1rem равен значению font-size в теге или браузера по умолчанию.
Можно указывать дробные числа, например 1.5rem

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся!
 Ставь лайк!
 И комментарий напиши!

Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 1rem; 1*16=16px)
Живи, а работай в свободное время! (задан font-size: 1.5rem; 1.5*16 = 24px)
Подписывайся! (наследует font-size: 1.5rem; 1.5*16 = 24px)
Ставь лайк! (задан font-size: 1.5rem; 1.5*16 = 24px)
И комментарий напиши! (задан font-size: 0.8rem; 0.8*16=12.8px)
Размер шрифта
по умолчанию 16px
width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;

0.9375 * 16 = 15px

Размер шрифта
задан 20px (font-size:20px;)
width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;
font-size: 20px;

0.9375 * 16 = 15px

Преимущества

Относительность REM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Более простое использование. Отлично подходит для указания размеров шрифтов.

Недостатки

По сравнению с PX, работать с REM более сложно, ведь для переноса данных из макета в единицы в REM требуются вычисления, но проще чем с EM.

% — проценты от .

Относительная единица. Можно указывать дробные числа, например 10.5%. Разные CSS свойства вычисляют процент относительно разных значений:

Ширина width — относительно ширины родительного элемента
Высота height — относительно высоты родительного элемента, но только если у него задана высота либо это флекс или грид элемент.
При относительном позиционировании (position: relative; + top left bottom right) нужны те же условия.
Для абсолютно позиционированных объектов — относительно высоты родительского элемента. При этом, задавать высоту родителю не обязательно.
Отступы padding \ margin — относительно ширины родительного элемента, даже если задаются вертикальные отступы.
transform: translate(x, y) — относительно ширины \ высоты самого объекта к которому применено свойство.
font-size и line-height — относительно размера свойства font-size

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся!
 Ставь лайк!
 И комментарий напиши!

Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 100%; 16/100*100=16px)
Живи, а работай в свободное время! (задан font-size: 150%; 16/100*150=24px)
Подписывайся! (наследует font-size: 150%; 16/100*150=24px)
Ставь лайк! (задан font-size: 150%; 24/100*150=36px)
И комментарий напиши! (задан font-size: 80%; 24/100*80=19.2px)
Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 50%;
height: 50%;
padding: 5%;
margin: 5%;

Ширина: 400/100*50 = 200px

Высота: 300/100*50 = 150px

Внутренние отступы: 400/100*5 = 20px

Внешние отступы: 400/100*5 = 20px

Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 50%;
height: 70%;
padding: 5%;
position: relative;
left: 10%;
top: 5%;

Ширина: 400/100*50 = 200px

Высота: 300/100*70 = 210px

Внутренние отступы: 400/100*5 = 20px

Вправо: 400/100*10 = 40px

Вниз: 300/100*5 = 15px

Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 70%;
height: 50%;
padding: 5%;
transform: translate(10%, 5%);

Ширина: 400/100*70 = 280px

Высота: 300/100*50 = 150px

Внутренние отступы: 400/100*5 = 20px

Вправо: 280/100*10 = 28px

Вниз: 150/100*5 = 7.5px

Преимущества

Относительность процентов позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для построения относительных конструкций и позиционирования объектов.

Недостатки

Требуют хорошего знания теории и четкого понимания — процент от чего вычислятестя в тот или иной момент

VW, VH, VMIN, VMAX — относительно окна (вьюпорта) браузера

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

Итак VW работает относительно ширины вьюпорта, VH относительно высоты вьюпорта.
VMIN — относительно наименьшего значения из (VW, VH). VMAX — относительно наибольшего значения из (VW, VH).

100vw равно ширине окна браузера (вьюпорта), 100vh равно высоте окна браузера (вьюпорта).
100wmin равно наименьшему из (vw, vh), 100vmax равно наибольшему из (vw, vh)

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 Обычный текст Привет! Это Фрилансер по жизни! Живи, а работай в свободное время! Подписывайся!
 Ставь лайк!
 
 И комментарий напиши!

CSS: em и rem — всё, что нужно знать

CSS — важная часть дизайна любого сайта и у него есть нюансы. Один из них — разница между em и rem , когда и зачем их нужно использовать.

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

В этой статье мы рассмотрим всё, что связано с em и rem , их различия, когда и как их использовать, а также практические примеры em и rem в действии. К концу этой статьи у вас будет чёткое представление об обоих значениях. Давайте приступим к делу.

Предполагается, что читатель хорошо разбирается в CSS. Необязательно быть профи, главное, чтобы основные CSS термины вас не смущают.

Единицы измерения em и rem в CSS

Когда мы выбираем способ указать размер в CSS, мы избалованы выбором. В CSS все единицы измерения делятся на две категории.

Абсолютные единицы измерения: как следует из названия они являются абсолютными, фиксированными и ни на что не реагируют. Это означает, что бы не случилось — они будут одного размера. Абсолютные единицы измерения включают:

mm — миллиметры;
Q — четверть миллиметра 1 Q = ¼ mm
cm — сантиметры 1 cm = 10 mm ;
in — дюймы;
px — пиксели, 1 px = 1/96 in ;
pt — пункты, 1 pt = 1/72 in ;
pc — пики, 1 pc = 12 pt .

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

% — размер в % относительно ширины родительского блока;
lh — высота строки элемента;
ch — ширина символа 0;
ex — x-высота шрифта, измеряется в высоте символа x в нижнем регистре,
vh — % высоты окна браузера;
vw — % ширины окна браузера;
vmax — большее значение высоты vh или ширины окна браузера vw ;
vmin — меньшее значение высоты vh или ширины окна браузера vw .

И единицы измерения о которых мы будем говорить: em — размер шрифта относительно размера шрифта родительского элемента и rem — размер шрифта относительно размера шрифта корневого элемента.

Что такое em

Как уже говорил выше, em в CSS — относительная единица измерения, используемая для определения размера элементов на веб-странице, в основном размера шрифта. Поскольку это относительная единица измерения — 1 em равен размеру шрифта установленном в родительском элементе. Это означает, что если вы установите размер шрифта в родительском в 20px и установите размер шрифта дочернего равный 2em , то размер шрифта в дочернем элементе будет равен 40px .

Давайте напишем HTML код:

html lang="en"> 
head> 
meta charset="UTF-8"> 
meta http-equiv="X-UA-Compatible" content="IE=edge"> 
meta name="viewport" content="width=device-width, initial-scale=1.0"> 
title>Documenttitle> 
link rel="stylesheet" href="style.css"> 
head> 
body> 
div class="parent"> 
I'm parent div set to 20px 
div class="child"> 
I'm the child div set to 2em, i.e 40px. 
div> 
div> 
body> 
html>

.parent 
font-size: 20px; 
> 
 
.child 
font-size: 2em; 
> 
 
p  
font-size: 1.5em; 
>

Вот, что у нас получилось:

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

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

p  
font-size: 1.5em; 
>

В этом примере для свойства font-size установлено значение 1.5em . Это означает, что размер текста в элементе параграф

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

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

Используя соответствующее CSS свойство, единицы измерения em можно использовать для установки размера других свойств элементов, таких как margin , padding и border .

Что такое rem

Теперь, когда мы знаем что такое em , давайте рассмотрим rem . rem — ещё одна относительная единица измерения в CSS, которая расшифровывается как root em — корневой em . Поскольку мы знаем, что em равен размеру шрифта родительского элемента, мы можем сделать вывод, что корневой em относится к размеру шрифта корневого элемента, которым обычно является элемент .

Не совсем понятно? Разберём ещё.

Как и em , rem наследует свой размер от родительского элемента, но родительский элемент на который смотрит rem , это не вышестоящий или , а самый первый элемент окружающий весь код, то есть элемент . Давайте рассмотрим пример, используя предыдущий код. Тот же HTML код, только с дополнительным .

html lang="en"> 
head> 
meta charset="UTF-8"> 
meta http-equiv="X-UA-Compatible" content="IE=edge"> 
meta name="viewport" content="width=device-width, initial-scale=1.0"> 
title>Documenttitle> 
link rel="stylesheet" href="style.css"> 
head> 
body> 
div class="parent"> 
I'm parent div set to 20px 
div class="child"> 
I'm the child div set to 2em, i.e 40px. 
div> 
div class="child-2"> 
I'm the child div set to 2em, i.e 60px. 
div> 
div> 
body> 
html>

И добавим к предыдущему CSS коду следующий фрагмент:

html 
font-size: 30px; 
> 
 
.child-2 
font-size: 2rem; 
>

Результат будет таким:

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

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

В чём разница между em и rem

После прочтения предыдущей части статьи вы уже знаете в чём заключается разница между em и rem , но для ясности ещё раз напомню. В CSS единица измерения rem относится только к корневому элементу документа, а em относится непосредственно к родительскому элементу. Это означает, что размеры em наследуются от родительских элементов, а размеры rem только от корневого элемента.

Когда использовать em , а когда rem

rem рекомендуется использовать для глобальных значений, таких как font-size , margin и padding , особенно если вы хотите задать один font-size для всего документа и обеспечить его равномерное масштабирование, без влияния родительских элементов.

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

Возможные проблемы при использовании em и rem

Не всё так идеально, как хотелось бы и вот несколько проблем с которыми вы можете столкнуться используя em и rem :

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

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

Единицы измерения: px, em, rem и другие

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

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

Достоинства

Главное достоинство пикселя – чёткость и понятность

Недостатки

Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Давно на свалке: mm , cm , pt , pc

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

1mm (мм) = 3.8px
1cm (см) = 38px
1pt (типографский пункт) = 4/3 px
1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

Почему в сантиметре cm содержится ровно 38 пикселей?

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

 Страусы Живут также в Африке

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с em вместо px :

 Страусы Живут также в Африке

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

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

Что такое размер шрифта?

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

Единицы ex и ch

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква «x» и ноль «0» . В этом случае они носят более условный характер.

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

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

 Страусы Живут также в Африке

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

px – абсолютные, чёткие, понятные, не зависящие ни от чего.
em – относительно размера шрифта.
% – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

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

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Вроде бы, использовать можно, однако есть проблема.

Протестируем на таком списке: