Px против Em против Rem: какую единицу CSS следует использовать?

Px против Em против Rem: какую единицу CSS следует использовать?

Вы изучите несколько модулей CSS для настройки размера шрифта текста при создании веб-страниц. Существует множество единиц, таких как pt, pc, ex и т. д., но в большинстве случаев вам следует сосредоточиться на трех самых популярных единицах: px, em и rem. Многие разработчики обычно не понимают, в чем разница между этими модулями; Итак, ниже подробное объяснение этих единиц.





СДЕЛАТЬ ВИДЕО ДНЯ

Прежде чем продолжить, обратите внимание, что существует два типа единиц длины: абсолютный а также родственник .



Абсолютные длины

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





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

Ед. изм Описание
см сантиметры
мм миллиметры
в дюймы (1 дюйм = 96 пикселей = 2,54 см)
пкс * пикселей (1 пиксель = 1/96 дюйма)
пт баллы (1 пт = 1/72 от 1 дюйма)
ПК пики (1шт = 12pt)

Относительная длина

Относительные единицы длины задают длину относительно другого свойства длины. Единицы относительной длины лучше масштабируются между разными средами рендеринга.



Ед. изм Относительно
в* Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта)
бывший Относительно x-высоты текущего шрифта (используется редко)
ч Относительно ширины '0' (ноль)
бэр* Относительно размера шрифта корневого элемента
оч.сл. Относительно 1% ширины окна просмотра*
вх Относительно 1% высоты окна просмотра*
мин Относительно 1 % меньшего размера области просмотра*
vmax Относительно 1 % большего размера области просмотра*
% Относительно родительского элемента

1. Px (пиксель)

Пиксель, вероятно, является наиболее часто используемой единицей в CSS и очень популярен, когда речь идет о настройке размера шрифта текста на веб-страницах. Один пиксель (1 пиксель) определяется как 1/96 дюйма в печатных СМИ.

Однако на экранах компьютеров они обычно не связаны с реальными измерениями, такими как сантиметры и дюймы, как вы можете подумать; они просто определены как маленькие, но видимые. То, что считается видимым, зависит от устройства.



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

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



Ниже приведен пример: -

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus 
         omnis at! Officiis praesentium officia, nemo veniam consequatur 
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor 
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus 
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div> 
.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

выход

размер веб-контента в пикселях, css, единица измерения

Верхний блок — это то, как он выглядит при отображении на большом экране, таком как ноутбук, а нижний — как он выглядит. при отображении на меньшем экране, например, на телефоне .

Обратите внимание, что текст в обоих полях имеет одинаковый размер. В основном так работает пиксель. Это помогает веб-содержимому (не только тексту) выглядеть одинаково на разных устройствах.

2. Я (М)

Единица em получила свое название от прописной буквы «M» (em), так как большинство единиц CSS пришли из типографики. Он использует текущий размер шрифта родительского элемента в качестве основы. Его можно использовать для увеличения или уменьшения размера шрифта элемента на основе размера шрифта, унаследованного от родителя.

Допустим, у вас есть родительский div с размером шрифта 16px. Если вы создадите элемент абзаца в этом div и зададите ему размер шрифта 1em, размер шрифта абзаца будет равен 16px.

Однако, если вы зададите другому абзацу размер шрифта 2em, это будет переведено в 32px. Рассмотрим пример ниже:

приложение, чтобы попробовать разные цвета волос
А9745БА5574Д034Б8Ф4БА52ДКД562ЭДД2А553Б64 
.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

выход

размер веб-контента в единицах измерения em css

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

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

3. Рэм (Корень Эм)

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

Размер шрифта по умолчанию в веб-браузере обычно составляет 16 пикселей, поэтому 1rem будет 16px, а 2rem — 32px. Однако в случае, когда размер корневого шрифта изменяется, например, на 10 пикселей; 1rem будет 10px, а 2rem будет 20px.

Вот пример, чтобы было понятнее:

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div>
АДКФ12793F5C52E597BA6B51C40391BE5D55E558

выход

размер веб-контента в рем css единица измерения

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

Px против Em против Rem: какой юнит лучше?

Em не рекомендуется из-за возможности сложной иерархии вложенных элементов. REM обычно соответствующим образом масштабируется с новым размером шрифта по умолчанию/базовым, указанным в настройках браузера, в отличие от PX. Это объясняет, почему вы должны использовать REM при работе с текстовым контентом на своих веб-страницах. REM выигрывает гонку. Улучшенный стиль и масштабирование вашего контента с помощью REM добавит изюминку вашему сайту, поскольку он идеально подходит для создателей веб-сайтов. Точечные измерения вашего контента будут определять внешний вид вашего веб-сайта, однако вам нужно проявить творческий подход.