Конвертер CSS-единиц
Перевод пикселей в относительные единицы невозможен без контекста: rem считается от корневого шрифта, em — от шрифта родителя, проценты — от размера родительского блока, а vw и vh — от окна. Инструмент спрашивает всё это явно и пересчитывает сразу во все единицы, поэтому видно не одно значение, а полную картину. Отдельная таблица показывает ходовую шкалу целиком — от 4 до 96 пикселей, — её удобно держать рядом при переводе макета на rem. Обратный ход тоже работает: вводите rem или проценты, получаете пиксели.
Контекст
Значение
Ходовая шкала
| px | rem | em | % | vw | pt |
|---|
Как пользоваться
- Корневой размер шрифта, шрифт родителя, ширина родительского блока и размеры окна.
- В любой единице — остальные пересчитаются сразу.
- Ходовые размеры от 4 до 96 пикселей, переведённые в rem и em при вашем контексте.
- Клик по значению в таблице кладёт его в буфер.
Частые вопросы
Чем rem отличается от em
rem всегда считается от размера шрифта корневого элемента html, em — от размера шрифта того элемента, на котором применяется, а если размер не задан, то от родителя. Отсюда главная ловушка em: вложенные элементы умножают коэффициент. Список внутри списка с font-size: 0.9em на третьем уровне даст 0,73 от исходного, и текст незаметно уползёт.
Почему 1rem обычно равен 16 пикселям
Это размер шрифта по умолчанию в браузерах. Он не случайный: пользователь может поменять его в настройках, и вся вёрстка в rem подстроится. Именно поэтому размеры шрифта задают в rem, а не в пикселях: человек с плохим зрением ставит крупнее — и сайт остаётся читаемым.
Стоит ли ставить html { font-size: 62.5% }
Этот приём делает 1rem равным 10 пикселям, чтобы считать в уме. Но он ломает пользовательскую настройку размера: человек увеличил шрифт до 20 пикселей, а сайт всё равно считает от 12,5. Лучше оставить базу как есть и пользоваться конвертером.
От чего считаются проценты
От соответствующего размера родителя, и это разный размер для разных свойств. Для width — ширина родителя, для height — высота, а для padding и margin, включая вертикальные, — тоже ШИРИНА. Последнее удивляет: padding-top: 10% на блоке шириной 400 пикселей даст 40 пикселей отступа, а не десятую часть высоты.
Когда нужны vw и vh
Когда размер должен зависеть от окна, а не от родителя: экран на всю высоту, крупный заголовок обложки, отступы, растущие вместе с шириной. Ловушка в том, что 100vh на телефоне включает область под адресной строкой, и низ страницы уезжает. Для этого случая есть более новая единица dvh, которая учитывает свернувшуюся панель.
Что такое ch и когда он полезен
Ширина символа «0» в текущем шрифте. Единица нужна ровно для одного: ограничить длину строки. Комфортная колонка чтения — от 45 до 75 символов, и записать это как max-width: 65ch честнее, чем подбирать пиксели под каждый шрифт.
Данные куда-то отправляются
Нет, всё считается в браузере.
Похожие инструменты
Список в строку с разделителем и обратно. Переносы ↔ запятые/пробелы.
ОткрытьРазбить текст на частиДелит длинный текст на куски нужной длины: Telegram 4096, подпись 1024, ВК 4000, description 160, SMS 70. Не рвёт слова и предложения.
ОткрытьИзменить размер фотоПиксели вручную или готовый пресет: обложка ВК, превью YouTube, аватар, фото 3×4, печать 10×15. Пакетно, с обрезкой или полями.
ОткрытьТипографорКавычки-ёлочки «», дефис → тире, неразрывные пробелы после предлогов, чистка двойных пробелов. Аккуратная типографика для сайта.
ОткрытьГенератор sitemap.xmlСоберёт ссылки прямо с вашего сайта по адресу или сделает карту из готового списка URL. lastmod, changefreq, priority.
ОткрытьОбрезать строкиУдалить N символов с краёв, текст до/после символа, убрать приставку или окончание.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.