Конвертер Единиц CSS

Два семейства единиц

Каждая длина в CSS принадлежит одному из двух семейств. Абсолютные единицы, такие как px, pt, cm, mm и in, описывают фиксированный физический размер или размер устройства, который не меняется в зависимости от контекста. Относительные единицы, такие как em, rem, проценты, vw, vh, ch и ex, описывают размер через что-то другое, обычно через размер шрифта или область просмотра. Всё искусство адаптивного, доступного CSS сводится к выбору правильного семейства для каждой задачи, и этот конвертер существует, чтобы чисто переводить между ними.

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

Пиксель и базовое значение в 16px

px — это точка отсчёта почти для каждого преобразования. Несмотря на название, пиксель CSS не всегда равен одной физической точке экрана; на дисплеях высокой плотности браузер сопоставляет его с несколькими точками устройства, чтобы слово размером 16px оставалось комфортным для чтения, и именно поэтому px считается абсолютной единицей, хотя оборудование различается. Большинство преобразований в этом инструменте опирается на одно число — корневой размер шрифта, который по умолчанию равен 16px, потому что именно такой размер браузеры по умолчанию применяют к элементу html. Измените эту базу в расширенных настройках — и каждый результат в rem и em пересчитается относительно неё.

em против rem: различие в каскаде

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

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

Единицы области просмотра для текучих макетов

Единицы области просмотра измеряются относительно размера самого окна. 1vw — это один процент ширины области просмотра, а 1vh — один процент её высоты, поэтому 50vw — это всегда половина ширины окна независимо от настроек шрифта. Они — основа текучих макетов и крупных заголовков на дисплеях, которые должны масштабироваться вместе с экраном, а не с размером текста.

Однако используйте их осторожно. Задание размера основного текста чисто в vw означает, что текст сжимается до нечитаемого на узком телефоне и раздувается на широком мониторе, а на некоторых конфигурациях может игнорировать масштабирование пользователя. Современное средство — функция clamp, которая принимает минимум, предпочтительное текучее значение и максимум, позволяя заголовку расти вместе с областью просмотра, но никогда не опускаться ниже нижней границы и не превышать верхнюю. Преобразуйте вашу нижнюю и верхнюю границы здесь в rem, чтобы они по-прежнему уважали пользовательские настройки шрифта.

Проценты, ch и ex

Процент относителен, но к чему именно — зависит от свойства. Для ширины это процент от ширины содержащего блока; для font-size это процент от размера шрифта родителя, что заставляет его вести себя во многом как em для текста. Именно из-за этой зависимости от контекста инструмент спрашивает родительский размер шрифта, когда вы преобразуете проценты размера шрифта. Ещё две единицы, относящиеся к шрифту, легко упустить из виду: ch — это ширина цифры ноль в текущем шрифте, идеальная для ограничения абзаца комфортной мерой чтения примерно в 60ch, а ex — это высота строчной буквы x, полезная для вертикальных подстроек, привязанных к пропорциям гарнитуры.

Абсолютные печатные единицы: pt, in, cm, mm

Физические единицы управляются точными соотношениями в спецификации CSS, и именно поэтому преобразования здесь не являются приближениями. Один дюйм равен 96px, одна точка — одна семьдесят вторая дюйма, так что она получается в один и одну треть пикселя, один сантиметр — около 37.8px, а один миллиметр — десятая часть от него. Эти соотношения фиксированы независимо от фактического дисплея.

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

Доступность: почему шрифты в px — это проблема

Когда вы задаёте размеры шрифта в px, вы их закрепляете. Пользователь, который увеличивает размер текста по умолчанию в браузере — часто потому, что ему это необходимо, — не видит никаких изменений, потому что фиксированное значение в пикселях полностью игнорирует это предпочтение. Задание размера текста в rem вместо этого означает, что он масштабируется вместе с выбранным пользователем корневым размером шрифта, и это одна из самых результативных побед в доступности, доступных в CSS, причём она ничего не стоит вам визуально для читателя с настройками по умолчанию.

Из этого естественно вытекает практичный рабочий процесс: проектируйте в пикселях, потому что они интуитивны, затем преобразуйте вашу типографику и отступы в rem перед выпуском, чтобы макет уважал пользовательские настройки. Это самое частое преобразование, которое выполняет данный инструмент, и при базе по умолчанию в 16px арифметика дружелюбна, ведь 16px — это 1rem, 24px — это 1.5rem, а 8px — это 0.5rem.