Единицы CSS: пиксели, EM и процент

Unit играет важную роль в измерении и строительстве таких вещей, как дом, мост или башня, и создание веб-сайта не является исключением. В Интернете используется ряд методов измерения, особенно в CSS, а именно Pixel, EM и Percentage.

В этом посте мы рассмотрим эти единицы измерения, чтобы лучше понять эти единицы измерения.

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

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

Я сталкивался с этой проблемой в прошлом и обнаружил, что пиксель в CSS на самом деле не является линейной единицей – это фактически радиальное измерение.

По сути, пиксель в CSS измеряет длину области отображения, а не разрешение экрана, поэтому разрешение экрана 1024 пикселя не означает, что экран также имеет длину 1024 пикселя.
Подробнее о PX
Я не разбираюсь в технических тонкостях этого вопроса, но если вы знаете Тригонометрия, и хотите узнать больше, ознакомьтесь со следующим объяснением от Шона Б. Пламера: CSS px – это угловое измерение.
Поиск области отображения
Итак, как нам найти фактическую область отображения устройства? К счастью, есть удобный специальный калькулятор, позволяющий примерно оценить площадь отображения в формате Pixel, CM в PX.

Нам просто нужна длина устройства в см и PPI (точка на дюйм) / DPI (точка на дюйм), которые вы можете получить из коробки устройства. При этом оказывается, что размер планшета, который я использовал, составляет всего 953 пикселей в длину.

Рекомендуемая литература: Кризис пиксельной идентичности

Размер шрифта пикселей в Photoshop
При работе в Photoshop мы обнаружим, что размер шрифта по умолчанию установлен на Pt (Points). Блок Pt идеально подходит для стилей печати.

Чтобы не путать это с пикселем, когда мы переводим его в веб-документы, мы можем изменить единицы измерения из следующего меню: Правка> Настройки> Единицы измерения и линейки.

Там вы получаете вариант окна, как показано на этом снимке экрана ниже. Выберите «пиксели» в качестве единицы «Тип».
И у нас есть px для размера шрифта.
В
EM – относительное измерение. В CSS под EM понимается умножение размера шрифта по умолчанию из устройства или самого документа, поэтому я лично называю EM как EMphasize, но, конечно, не верю мне на слово.

Вот пример; скажем, в документе установлен размер шрифта 16 пикселей. 1em равно 16px, 2em равно 32px и так далее.

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

Единственное ограничение при работе с модулем EM – это не совсем интуитивно понятный интерфейс, но есть два практических способа справиться с этим. Во-первых, мы можем использовать этот калькулятор, PX в EM; это удобный калькулятор, которым я часто пользуюсь.
Другой способ – установить базу пикселей документа равной 10 пикселей, чтобы нам было проще вычислить; например установка 15 пикселей на 1.5em. Что ж, надеюсь, вы уловили основную идею этого примера.
Процент
Это более просто с процентами, которые измеряются относительно длины родительского элемента. Когда родительская ширина составляет 800 пикселей, тогда 50% станет 400 пикселей. В последние годы, когда адаптивный дизайн становится стандартом веб-дизайна, процентная единица все чаще адаптируется в дикой природе.

Хорошо, давайте посмотрим на следующий пример; приведенный ниже код определяет селектор классов .container и .main с шириной 60%, но эти классы относятся к разным родителям, поэтому они генерируют разную длину.

.Container займет 60% ширины области просмотра браузера, в то время как .main примет ширину .container в качестве своего прямого родителя.

.container {ширина: 60%; маржа: 100 пикселей автоматически; цвет фона: #eaeaea; набивка: 1%; высота: 250 пикселей; семейство шрифтов: Arial; выравнивание текста: центр; } .main, .aside {высота строки: 253px; } .main {width: 60%; высота: 100%; плыть налево; цвет фона: #ccc; } .aside {width: 40%; высота: 100%; цвет фона: #aaa; плыть налево; }

Таким образом, это даст нам следующий приятный результат:
Процент также является относительной единицей, поэтому он имеет такое же ограничение, как и единица EM. Не очевидно, сколько процентов 15 пикселей от 500 пикселей? Обычно это происходит, когда мы переводим единицы пикселей со стадии дизайна в веб-документ.

Есть два способа решить этот вопрос: либо мы делаем это традиционно с помощью калькулятора, либо, если вам удобно использовать препроцессор CSS, вы можете использовать функцию процент () из Sass.
Последние мысли
Есть много дискуссий о лучших практиках использования модулей в веб-дизайне. Но в идеале модуль PX следует использовать, когда свойства обычно должны быть точными, например, радиус границы и прямоугольное смещение по горизонтали или вертикали, в то время как для модуля EM как предлагает W3C, лучше использовать для изменения размера шрифта. Процент – идеальная единица для использования в адаптивных макетах.