Как рассчитать em css

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px , чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы c m , pt , mm , in и pc , как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px . Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px , а не pt , cm и т.д.

Используйте em или px для шрифтов

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt , пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt , ни других абсолютных единиц, а использовать только em и px .

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, px , часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в em . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em : H1 , чтобы H1 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

div.mybox < border: 2px solid >@media (min-resolution: 2dppx) < /* Media with 2 or more dots per px */ div.mybox < border: 1.5px solid >>

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem . Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em , который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

p < margin-left: 1em >h1
p < margin-left: 1rem >h1

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin , соответствующая меньшему из vw и vh . И vmax (можете догадаться, что она делает).

Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 12 Jan 2010;
Last updated Ср 06 янв 2021 05:40:49

rem , em

Относительные единицы измерения, которые считаются от размера шрифта.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. Пример
3. Как пишется
4. Как понять
5. Подсказки
6. На практике
   1. Realetive советует
   2. Алёна Батицкая советует
   1. Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?

   Обновлено 9 мая 2023

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента или — rem (от root ephemeral unit — «главная относительная единица»).

   Пример

   Скопировать ссылку «Пример» Скопировано

   Пусть размер шрифта корневого элемента будет равен 16 пикселям:

    html  font-size: 16px;> html  font-size: 16px; >    Скопировать Скопировано Не удалось скопировать   

   Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:

    .block  font-size: 1.5rem;> .block  font-size: 1.5rem; >    Скопировать Скопировано Не удалось скопировать   

   Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em , то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.

    .block__elem  width: 5em;> .block__elem  width: 5em; >    Скопировать Скопировано Не удалось скопировать   

   А если самому элементу задать размер шрифта 2em , то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.

    .block__elem  width: 5em; font-size: 2em;> .block__elem  width: 5em; font-size: 2em; >    Скопировать Скопировано Не удалось скопировать   

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Как и все остальные единицы измерения в CSS — em и rem пишутся сразу после числового значения без пробела:

    .selector  width: 10em;> .selector  margin: 5rem;> .selector  width: 10em; > .selector  margin: 5rem; >    Скопировать Скопировано Не удалось скопировать   

   Как понять

   Скопировать ссылку «Как понять» Скопировано

   Единицы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width , height , padding , margin , border — width и так далее.

   Итоговое значение размера, заданное через em и rem , вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem , изменится.

   Подсказки

   Скопировать ссылку «Подсказки» Скопировано

   �� Часто при работе с rem для селектора html пишется следующее CSS-правило:

    html  font-size: 62.5%;> html  font-size: 62.5%; >    Скопировать Скопировано Не удалось скопировать   

   Магическое число 62.5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.

   Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.

   На практике

   Скопировать ссылку «На практике» Скопировано

   Realetive советует

   Скопировать ссылку «Realetive советует» Скопировано

   �� Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl — , то значение шрифта у также пропорционально изменится, даже если оно было задано явно. Такое масштабирование будет происходить более пропорционально, если при вёрстке вы сможете найти закономерности размеров элементов относительно размера шрифта.

   Алёна Батицкая советует

   Скопировать ссылку «Алёна Батицкая советует» Скопировано

   �� При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, и меняются только фактические размеры, то можно сделать, например, так:

    html  /* 10px */ font-size: 62.5%;> .title-block  /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem;> @media (max-width: 640px)  html  /* 8px */ font-size: 50%; >> html  /* 10px */ font-size: 62.5%; > .title-block  /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem; > @media (max-width: 640px)  html  /* 8px */ font-size: 50%; > >    Скопировать Скопировано Не удалось скопировать   

   Без дополнительных правил ширина блока уменьшилась до 80px, а размер шрифта внутри до 16px.

   Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение ��

   На собеседовании

   Скопировать ссылку «На собеседовании» Скопировано

   Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?

   Скопировать ссылку «Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?» Скопировано

   Скопировать ссылку «Матвей Романов отвечает» Скопировано

   Что такое em

   Скопировать ссылку «Что такое em» Скопировано

   Единицы em в CSS — это относительная единица измерения, которую используют для определения размера элементов, в основном для размера шрифта. Поскольку так задаются размеры относительно родительского элемента, 1em равен размеру шрифта, установленному в родительском элементе.

   Это означает, что если установите размер шрифта в родительском как 20px и размер шрифта дочернего как 2em , размер шрифта в дочернем будет равен 40px .

   Что такое rem

   Скопировать ссылку «Что такое rem» Скопировано

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

   Польза для доступности

   Скопировать ссылку «Польза для доступности» Скопировано

   Единицы em и rem — масштабируемый и гибкий способ изменения размеров шрифта на странице, в отличие от px . Если измените размер шрифта корневого элемента, все элементы, размер которых измеряется с помощью 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 .

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

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

   Единицы измерения

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

   Время чтения: 6 мин

   Открыть/закрыть навигацию по статье

   1. Единицы измерения длины или расстояния
      1. Относительные величины
      2. Абсолютные величины
      1. Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?
      2. Расскажите как соотносятся с размером шрифта px, em и rem?

      Контрибьюторы:

      Обновлено 20 декабря 2021

      Каждое CSS-правило состоит из одной или нескольких пар «свойство-значение». В зависимости от свойства значение может быть, например, числом, или ключевым словом, или несколькими числами с единицами измерения (например, 45deg или 100px ). Рассмотрим основные единицы измерения.

      Единицы измерения длины или расстояния

      Скопировать ссылку «Единицы измерения длины или расстояния» Скопировано

      Относительные величины

      Скопировать ссылку «Относительные величины» Скопировано

      Используются для задания размера или расстояния относительно чего-либо. Например, vh считается относительно высоты вьюпорта (области просмотра страницы в окне браузера).

      • em задаёт величину относительно вычисленного размера шрифта элемента. Если для элемента font — size : 20px , то 2em будут эквивалентны 40px . При задании размера шрифта в em он считается относительно размера шрифта родительского блока.
      • rem рассчитывается относительно размера шрифта корневого элемента. Для веб-страницы это . По умолчанию размер шрифта для равен 16px . При таких условиях 2rem эквивалентны 32px .
      • vh задаёт размер в процентах от высоты вьюпорта. 1vh составляет 1% от высоты.
      • vw задаёт размер в процентах от ширины вьюпорта. 1vw составляет 1% от ширины.
      • vmin считается относительно меньшей стороны вьюпорта. Если ширина вьюпорта больше высоты, то vmin будет считаться относительно высоты. И наоборот. 1vmin составляет 1% от меньшей стороны вьюпорта.
      • vmax считается относительно большей стороны вьюпорта. 1vmax составляет 1% от большей стороны.
      • ex задаёт величину относительно метрики шрифта x — height . Так называется расстояние между базовой линией шрифта и средней линией строчных букв. Обычно это высота буквы x в шрифте, отсюда и название x — height . Эту экзотическую величину можно использовать, например, при стилизации верхних или нижних индексов. В примере ниже свойство bottom со значением 1ex поднимет верхний индекс на высоту строчных букв, а со значением -1ex опустит нижний индекс вниз:

       sup  position: relative; bottom: 1ex;> sub  position: relative; bottom: -1ex;> sup  position: relative; bottom: 1ex; > sub  position: relative; bottom: -1ex; >    Скопировать Скопировано Не удалось скопировать   

      • cap считается относительно высоты заглавных букв шрифта.
      • ch задаёт величину относительно ширины символа 0 (ноль) в шрифте. В моноширинных (с фиксированной шириной символа) шрифтах (Courier, Menlo, Monaco и других) указание размера 10ch будет в точности соответствовать ширине 10 символов. В других шрифтах будет наблюдаться расхождение, ведь, например, ширина цифры 1 меньше, а ширина буквы Ш — больше ширины символа 0 .
      • ic — это эквивалент ch в восточных языках (китайском, корейском, японском). Задаёт размер относительно размера иероглифа 水 (вода).
      • lh задаёт размер относительно межстрочного интервала. Если прописано свойство line — height : 16px , то 2lh эквивалентно 32px .
      • rlh то же, что и lh , но относительно line — height элемента .

      Абсолютные величины

      Скопировать ссылку «Абсолютные величины» Скопировано

      Абсолютные величины ни от чего не зависят и привязаны к физическим единицам измерения: дюймам или сантиметрам. Этот факт имеет исторические предпосылки. Когда появились первые программы предпечатной подготовки, возникла необходимость понимать, как картинка на экране будет соответствовать напечатанному варианту. Экраны мониторов в то время были примерно одинаковые, и оказалось, что одному дюйму на экране соответствуют 72 экранных точки. Именно это соотношение зафиксировано в единице измерения pt . С развитием технологий улучшались экраны и их разрешение, в один дюйм стало умещаться 96 точек, и это было зафиксировано в px .

      • px соответствуют пикселям на экране. 1px интерпретируется как 1/96 дюйма.
      • cm — сантиметры. 1cm = 96px / 2 . 54 .
      • in — дюймы. 1in = 96px = 2 . 54cm .
      • mm — миллиметры. 1mm = 1 / 10cm .
      • Q — четверть миллиметра. 1 Q = 1 / 40cm .
      • pc — пики. 1pc = 1 / 16in .
      • pt — пункты. 1pt = 1 / 72in .

      Абсолютные величины, отличные от пикселей, удобно использовать для вывода на печать.

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

      Единицы измерения углов

      Скопировать ссылку «Единицы измерения углов» Скопировано

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

      • deg — градусы угла. Полная окружность содержит 360 градусов. В тригонометрии 0° соответствует пересечению окружности с осью x, и градусы отсчитываются против часовой стрелки. В CSS 0deg соответствует пересечению окружности с осью y, а градусы отсчитываются по часовой стрелке:

      

      • grad — градианы. 1/100 от прямого угла (0.9°). Полная окружность содержит 400 градиан. Эта единица измерения чуть удобнее градусов в плане практических расчётов.
      • rad — радианы. Полная окружность содержит 2π (~6.2832) радиан.
      • turn — оборот. Полная окружность соответствует одному обороту ( 1turn ). Поворот элемента на 90 градусов соответствует 0 . 25turn .

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

      Скопировать ссылку «Единицы измерения времени» Скопировано

      Используются для задания длительности анимации или перехода в свойствах animation и transition .

      • ms — миллисекунда.
      • s — секунда. 1s = 1000ms .

      Единицы, связанные с разрешением экрана

      Скопировать ссылку «Единицы, связанные с разрешением экрана» Скопировано

      Используются для указания плотности пикселей (разрешения экрана) в медиавыражениях.

      • dpi — указывает плотность пикселей в точках на дюйм (dots per inch). Обычные экраны имеют плотность пикселей 72 или 96dpi, но при печати это разрешение гораздо выше (300 и более точек на дюйм). 1dpi = 0 . 39dpcm . В примере ниже изменим размер шрифта при печати на устройствах с плотностью пикселей больше 300:

       @media print and (min-resolution: 300dpi)  .element  font-size: 8pt; >> @media print and (min-resolution: 300dpi)  .element  font-size: 8pt; > >    Скопировать Скопировано Не удалось скопировать   

      • dpcm — плотность пикселей в точках на сантиметр. 1dpcm = 2 . 54dpi .
      • dppx , x — описывает плотность в точках на px . Поскольку соотношение in и px равно 1/96, 1dppx = 96dpi .

      Проценты

      Скопировать ссылку «Проценты» Скопировано

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

      Например, при указании width : 50 % ширина элемента будет высчитана как 50% (половина) от ширины родителя. Но если мы укажем в процентах положение фона background — position — x : 30 % , это значение будет высчитано относительно ширины самого элемента.

      На собеседовании

      Скопировать ссылку «На собеседовании» Скопировано

      Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?

      Скопировать ссылку «Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?» Скопировано

      Скопировать ссылку «Матвей Романов отвечает» Скопировано

      Что такое em

      Скопировать ссылку «Что такое em» Скопировано

      Единицы em в CSS — это относительная единица измерения, которую используют для определения размера элементов, в основном для размера шрифта. Поскольку так задаются размеры относительно родительского элемента, 1em равен размеру шрифта, установленному в родительском элементе.

      Это означает, что если установите размер шрифта в родительском как 20px и размер шрифта дочернего как 2em , размер шрифта в дочернем будет равен 40px .

      Что такое rem

      Скопировать ссылку «Что такое rem» Скопировано

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

      Польза для доступности

      Скопировать ссылку «Польза для доступности» Скопировано

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

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

      Расскажите как соотносятся с размером шрифта px , em и rem ?

      Скопировать ссылку «Расскажите как соотносятся с размером шрифта px, em и rem?» Скопировано

      Скопировать ссылку «Алина Шаталова отвечает» Скопировано

      Пиксель px – это абсолютная единица измерения. 1px интерпретируется как 1/96 дюйма. Главное достоинство использования пикселей для определения размера – чёткость и понятность. Однако, пиксель является фиксированной величиной и не позволяет устанавливать соотношение между различными размерами.

      В отличие от px , единицы em и rem – относительные величины.

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

      Размер шрифта в rem рассчитывается относительно размера шрифта корневого элемента. Для веб-страницы это .

      Читать:

      Как сделать полный сброс ноутбука