Что это такое
PT и VH — единицы из разных систем измерения. PT (points, пункты) пришли из полиграфии и часто встречаются в макетах Figma или Photoshop. VH (viewport height) — относительная единица CSS, которая равна одному проценту от текущей высоты окна браузера. Конвертер PT в VH решает задачу перевода абсолютных значений из дизайн-макетов в адаптивные CSS-величины. Инструмент учитывает высоту вьюпорта и выдаёт готовое значение для использования в стилях.
Как пользоваться
- Откройте конвертер PT в VH на странице DarkPlay.
- Введите числовое значение в пунктах — например,
24или16.5. - Выберите пресет устройства из выпадающего списка (iPhone, Android, десктоп и другие) либо задайте высоту вьюпорта в пикселях вручную.
- Нажмите кнопку «Конвертировать» — калькулятор мгновенно покажет результат в vh.
- Скопируйте готовое CSS-правило, которое инструмент сгенерирует автоматически, например:
height: 3.125vh;. - При необходимости сверьтесь с таблицей перевода для соседних значений — она обновляется под ваш пресет.
Кому и когда пригодится
Инструмент полезен верстальщикам и frontend-разработчикам, которые переносят макеты из графических редакторов в код. Дизайнеры используют его, чтобы проверить, как типографика в пунктах будет масштабироваться на разных экранах. Конвертер PT в VH выручает при создании адаптивной вёрстки для лендингов и сайтов с нестандартными секциями — там, где нужно привязать размеры к высоте экрана. Также он пригодится при работе с CSS-анимациями и элементами вроде полноэкранных слайдеров или модальных окон, где важно сохранить пропорции относительно вьюпорта. Сфера применения — любые задачи, где требуется конвертация из фиксированных пунктов в гибкие viewport-единицы без ручных расчётов.
Плюсы и ограничения
Плюсы:
- Мгновенный пересчёт с учётом выбранного устройства — не нужно лезть в DevTools.
- Готовое CSS-правило избавляет от ошибок в синтаксисе.
- Таблица перевода помогает быстро подобрать соседние значения.
- Бесплатный доступ и понятный интерфейс без лишних действий.
Ограничения:
- Результат зависит от высоты вьюпорта: на разных устройствах значение vh будет визуально отличаться.
- Пункты в вебе почти не используются напрямую — перевод нужен только на этапе переноса макета.
- Инструмент не учитывает динамическую адресную строку мобильных браузеров, из-за которой vh может «прыгать».
Частые вопросы
Чем PT отличается от PX?
PT — типографский пункт, равный 1/72 дюйма (≈0.353 мм). PX — пиксель, который в CSS считается абстрактной единицей и обычно совпадает с физическим пикселем устройства при стандартном масштабе. В макетах PT часто используют для шрифтов, а в CSS — PX или относительные единицы.
Можно ли перевести PT в VH без калькулятора?
Теоретически да, но понадобится знать высоту вьюпорта в пикселях. Формула: (PT × 1.333) / VH_в_px × 100. Однако конвертер PT в VH делает это быстрее и исключает арифметические ошибки, особенно при дробных значениях.
Почему нельзя просто заменить PT на PX в CSS?
Потому что PT — абсолютная единица, а PX в CSS тоже абсолютная, но они не совпадают математически (1pt = 1.333px). Для адаптивной вёрстки лучше использовать относительные единицы вроде VH, VW или REM, чтобы элементы масштабировались вместе с экраном.
Какой пресет выбрать для точного результата?
Ориентируйтесь на целевые устройства аудитории. Если сайт просматривают в основном с десктопа — выбирайте пресет с высотой 1080px. Для мобильной версии подойдёт iPhone (например, 844px для iPhone 13). Если сомневаетесь, задайте высоту вручную из Google Analytics.
Влияет ли поворот экрана на конвертацию?
Да, напрямую. При повороте смартфона высота вьюпорта меняется, поэтому одно и то же значение PT даст разный результат в VH. Учитывайте это при тестировании и закладывайте адаптивность через медиазапросы.