Перейти к содержанию
TextArray
100% локально

Конвертер единиц измерения CSS

Преобразуйте длину CSS между px, rem, em, pt и % в зависимости от любого корневого размера шрифта.

Входные данные
Выходные данные

Конвертер единиц измерения CSS

Вставьте значения CSS по одному в строке — 16px, 1,5rem, 12pt, 150% — и этот конвертер мгновенно их переведет. Голое число считывается в единице, заданной выбором From, а единица, записанная в строке, всегда выигрывает, поэтому можно смешивать пиксели и rems в одном списке. Выберите цель в разделе «До» или выберите «Все единицы», чтобы сразу увидеть всю цепочку: 16 пикселей = 1 рем = 12 точек = 100%. Строки, которые не являются простыми значениями, проходят без изменений, поэтому случайный комментарий никогда не прерывает выполнение.

Математика зависит от одной цифры: базового размера, размера корневого шрифта в пикселях. Браузеры по умолчанию имеют размер 16 пикселей, поэтому 1rem обычно равен 16 пикселям, а 100 % соответствует базовому значению. Установите базовое значение 10 для классического трюка с 62,5%, где 1,5rem = 15 пикселей, или сопоставьте систему дизайна с другим корнем. Точки фиксируются самим CSS: 1 пиксель — это 1/96 дюйма, а 1 точка — 1/72, поэтому 16 пикселей — это ровно 12 пикселей независимо от базы. Опция десятичных знаков ограничивает точность до шести знаков, при этом конечные нули обрезаются.

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

Все работает локально в вашем браузере — ничего не загружается и нечего ждать. Скопируйте преобразованный список или загрузите его в виде файла .txt.

FAQ

Зачем использовать rem вместо px?
Значения Rem масштабируются в зависимости от размера шрифта, который читатель устанавливает в своем браузере, поэтому люди, которым нужен текст большего размера, действительно его получают. Значения Px игнорируют это предпочтение. Преобразование дизайна на основе px в rem — одно из самых дешевых преимуществ доступности.
Каков базовый размер и почему по умолчанию он равен 16?
Это размер корневого шрифта в пикселях — к чему относятся 1rem, 1em и 100%. Каждый крупный браузер поставляется с размером по умолчанию 16 пикселей, поэтому 16 — это правильная база, если ваша таблица стилей не меняет корень, например html {font-size: 62,5% }, что делает базу 10.
В чем разница между em и rem?
Rem всегда зависит от размера корневого шрифта; em относится к текущему элементу, поэтому вложенные значения em умножаются. Этот преобразователь объединяет оба варианта в одном базовом размере — плоском корпусе. В глубоко вложенной разметке реальные значения em могут различаться.
Что происходит со строками, которые не являются значениями?
Они передаются на выход без изменений, и подсчет считает их пропущенными. Преобразовываются только простые значения, такие как 16px, 1,5rem или простое число — полные объявления CSS выходят за рамки.
Мой текст где-нибудь загружен?
Нет. Инструмент полностью работает в вашем браузере, и вводимые вами данные никогда не покидают ваше устройство.