Пкс против. Эм против. Рем: Какой блок CSS следует использовать?

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

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

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

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

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

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

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

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

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

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

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

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

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

<раздел класс ="контейнер">
<див>
<h1>это абзац</h1>
<п>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 омнис ат! Officiis preesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 сидеть amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure impedit acceptenda Differentio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</п>
</div>
</div>

.контейнер {
 ширина: 100%;
 высота: 100вх;
 дисплей: гибкий;
 выравнивание содержимого: по центру;
 выравнивание элементов: по центру;
}
.контейнердив {
 максимальная ширина: 500 пикселей;
 отступ: 5px 20px;
 граница: 1px серая сплошная;
 радиус границы: 10px;
}
п {
 размер шрифта: 16px;
}

выход

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

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

2. Эм (М)

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

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

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

<раздел класс ="div-one">
<р класс ="один-эм">1 эм на основе 10 пикселей</п>
<р класс ="два-эм">2 em на основе 10px</п>
</div>
<раздел класс ="раздел-два">
<р класс ="один-эм">1 эм на основе 10 пикселей</п>
<р класс ="два-эм">2 em на основе 10px</п>
</div>
</div>

.div-один {
 размер шрифта: 15px;
}
.div-два {
 размер шрифта: 20px;
}
.one-em {
 размер шрифта: 1em;
}
.два-эм {
 размер шрифта: 2em;
}

выход

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

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

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

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

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

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

<раздел класс ="div-one">
<!-- ЭМ -->
<р класс ="один-эм">1 em на основе контейнера (40px)</п>
<р класс ="два-эм">2 em на основе контейнера (40px)</п>
<!-- РЕМ -->
<р класс ="один бэр">1 рем на основе корня (16px)</п>
<р класс ="два бэр">2 рем на основе корня (16px)</п>
</div>

.div-один {
 размер шрифта: 40px;
}
.one-em {
 размер шрифта: 1em;
}
.два-эм {
 размер шрифта: 2em;
}
.one-rem {
 размер шрифта: 1rem;
}
.два бэр {
 размер шрифта: 2rem;
}

выход

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

Пкс против. Эм против. Рем: Какой юнит лучше?

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