📏

Конвертер VH в CM

Перевод единиц vh (viewport height) в сантиметры для любого устройства

Загрузка инструмента...

Конвертер VH в сантиметры (CM) онлайн — точный перевод viewport height в физические единицы

Онлайн-конвертер vh в см позволяет мгновенно перевести значение viewport height в сантиметры для любого устройства. Единица vh (viewport height) широко используется в CSS-верстке и адаптивном дизайне, однако разработчикам и верстальщикам часто требуется понять, какому физическому размеру соответствует то или иное значение vh на конкретном экране. Калькулятор vh в cm решает эту задачу: достаточно указать количество vh, и инструмент автоматически рассчитает результат в сантиметрах, миллиметрах, дюймах и пикселях.

Инструмент автоматически определяет параметры вашего экрана — высоту окна браузера (viewport) и плотность пикселей (DPI). Это позволяет получить результат конвертации за одно нажатие, без необходимости вводить технические характеристики вручную. При этом конвертер поддерживает выбор из 12 популярных устройств: iPhone 15, Samsung Galaxy S24, iPad Pro, MacBook Air, мониторы Full HD, QHD и 4K — что делает его незаменимым при проектировании интерфейсов для конкретных экранов.

Перевод vh в сантиметры необходим, когда вы хотите понять, как CSS-единицы viewport height соотносятся с реальным миром. Например, при проектировании баннеров, модальных окон или секций-героев (hero section) важно знать, сколько сантиметров займёт блок высотой 100vh или 50vh на экране пользователя. Калькулятор конвертации vh в cm даёт точный ответ с учётом конкретного устройства и его разрешения.

В основе расчёта лежит формула перевода CSS-единиц в физические размеры. Сначала значение vh переводится в пиксели: px = vh viewport_height / 100. Затем пиксели конвертируются в сантиметры через DPI экрана: cm = px / DPI 2,54. Инструмент учитывает коэффициент devicePixelRatio для корректного определения физической плотности пикселей на экранах Retina и HiDPI-дисплеях.

Конвертер vh в cm создан для фронтенд-разработчиков, веб-дизайнеров, верстальщиков и всех, кто работает с CSS-единицами viewport. Инструмент работает полностью в браузере, не отправляет данные на сервер и мгновенно выдаёт результат. Поддерживается автоматическое определение параметров экрана, ручная настройка высоты viewport и DPI, а также пресеты для самых распространённых мобильных устройств, планшетов, ноутбуков и мониторов.

Помимо основного результата в сантиметрах, калькулятор отображает значение в миллиметрах, дюймах и пикселях, а также подробную формулу расчёта. Это позволяет верифицировать результат и использовать промежуточные значения для других целей — например, для расчёта размеров элементов в макетах Figma, Sketch или Adobe XD, где физические единицы играют ключевую роль.

Единица vh (viewport height) — это относительная единица измерения в CSS, которая равна 1% от высоты области просмотра браузера. Если высота viewport составляет 900 пикселей, то 1vh равен 9 пикселям, а 100vh — полной высоте экрана (900 пикселей). Единицы viewport (vh, vw, vmin, vmax) были введены в CSS3 и стали стандартом для создания адаптивных интерфейсов, которые масштабируются под размер окна браузера.

Значение vh зависит от высоты окна браузера, а не от размера всего экрана. Это важный нюанс: на мобильных устройствах адресная строка и панели навигации могут уменьшать viewport, из-за чего фактическая высота в пикселях оказывается меньше физического разрешения дисплея. Современные CSS-единицы svh, lvh и dvh учитывают эти особенности, однако классическая единица vh по-прежнему остаётся самой распространённой.

Перевод viewport height в физические единицы (сантиметры или миллиметры) нужен в нескольких ситуациях. Во-первых, при проектировании печатных версий веб-страниц: если секция занимает 50vh на экране, дизайнеру важно знать, сколько это будет в сантиметрах при печати. Во-вторых, для подготовки макетов в графических редакторах, где используются физические единицы. В-третьих, для документации и технических заданий, где требования к размерам элементов описываются в метрических единицах.

Разработчики также используют конвертацию vh в cm при создании интерфейсов для устройств с экранами известного размера — например, для информационных киосков, рекламных панелей или автомобильных дисплеев, где физический размер элемента критически важен для удобства использования и читаемости контента.

Конвертация vh в сантиметры выполняется в два шага. На первом шаге значение vh переводится в пиксели по формуле: px = vh_value viewport_height_px / 100 . На втором шаге пиксели переводятся в сантиметры через плотность экрана: cm = px / DPI 2,54 , где DPI (dots per inch) — количество пикселей на дюйм экрана, а 2,54 — количество сантиметров в одном дюйме.

Для экранов с повышенной плотностью пикселей (Retina, HiDPI) необходимо учитывать коэффициент devicePixelRatio. Например, на MacBook Pro с Retina-дисплеем devicePixelRatio равен 2, что означает, что физическая плотность пикселей вдвое выше CSS-разрешения. Конвертер автоматически учитывает этот параметр при определении DPI вашего устройства.

Инструмент перевода vh в сантиметры будет полезен фронтенд-разработчикам, которые создают адаптивные интерфейсы с использованием единиц viewport; веб-дизайнерам, переводящим макеты из пикселей и сантиметров в CSS-единицы; верстальщикам, оптимизирующим отображение сайтов на различных устройствах; UX/UI-специалистам, оценивающим физические размеры элементов интерфейса; студентам и начинающим разработчикам, изучающим единицы измерения в CSS; а также менеджерам проектов, которым необходимо указать точные размеры в технических заданиях и спецификациях.

  • Мгновенная конвертация vh в сантиметры, миллиметры, дюймы и пиксели
  • Автоматическое определение высоты viewport и DPI вашего экрана
  • Пресеты для 12 популярных устройств (iPhone, Samsung, iPad, MacBook, мониторы)
  • Ручная настройка параметров экрана для точного расчёта
  • Подробная формула расчёта с промежуточными значениями
  • Копирование результатов в один клик для быстрой вставки
  • Быстрые кнопки популярных значений: 1, 5, 10, 25, 50, 100 vh
  • Полностью клиентская обработка — никакие данные не отправляются на сервер
  • Адаптивный интерфейс для работы на любом устройстве
📐

Расчёт высоты баннера

Верстальщик Павел создавал баннер height: 50vh и хотел знать его реальную высоту на разных устройствах для подготовки изображения.

1

iPhone 14: viewport 844px → 50vh = 422px. При 163 dpi → 6,57 см

2

MacBook 14": viewport 900px → 50vh = 450px. При 96 dpi → 11,91 см

3

Full HD монитор: viewport 1080px → 50vh = 540px. При 96 dpi → 14,29 см

4

Подготовил изображение, покрывающее максимальный размер (14,3 см)

Баннер выглядит чётко на всех устройствах — изображение подготовлено под максимальный физический размер

🧠

Факты о vh и сантиметрах

💎

1vh = 1% высоты viewport (видимой области браузера). На экране 1080px высотой: 1vh = 10,8px.

🔍

На мобильных vh — проблемная единица: адресная строка браузера «съедает» часть viewport, и 100vh > видимой области.

📊

CSS-единица dvh (dynamic vh) решает проблему мобильных: учитывает динамическое изменение viewport при скрытии/показе адресной строки.

🌟

Сантиметр в CSS — не физический: 1cm в CSS = 37,8px при 96 dpi, но реальный размер зависит от калибровки экрана.

На экране Retina (326 ppi) 1 CSS-пиксель = 0,078 мм. На обычном экране (96 ppi) = 0,265 мм.

🧠

Для печати используйте cm/mm напрямую — браузер пересчитает в физические размеры. Для экрана — px, vh, rem.

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

Устройство1 vh10 vh50 vh100 vh
Full HD 24" (1080p)0,30 см2,98 см14,91 см29,82 см
QHD 27" (1440p)0,34 см3,36 см16,78 см33,56 см
4K UHD 27"0,34 см3,37 см16,84 см33,67 см
MacBook Air 13"0,11 см1,07 см5,35 см10,69 см
iPad Pro 12,9"0,26 см2,63 см13,14 см26,28 см
iPhone 150,15 см1,47 см7,36 см14,71 см
⚠️

vh на мобильных — осторожно

100vh на мобильных может быть больше видимой области из-за адресной строки. Используйте dvh (dynamic viewport height) или JavaScript: window.innerHeight для точного расчёта.

Как конвертировать vh в сантиметры — пошаговая инструкция

1

Введите значение vh

Укажите число в единицах vh, которое необходимо конвертировать в сантиметры. Можно ввести любое значение — целое или дробное. Также доступны быстрые кнопки для популярных значений: 1, 5, 10, 25, 50 и 100 vh.

2

Выберите устройство

По умолчанию используются параметры вашего текущего экрана. Если вы хотите рассчитать размер для другого устройства, выберите его из списка пресетов: iPhone, Samsung, iPad, MacBook или стационарные мониторы различных разрешений.

3

Получите результат

Нажмите кнопку "Конвертировать" и получите значение в сантиметрах, миллиметрах, дюймах и пикселях. Каждое значение можно скопировать отдельно или скопировать все результаты вместе с формулой расчёта.

Практические примеры конвертации vh в сантиметры

🎨 Проектирование hero-секции на лендинге

Дизайнер создаёт лендинг с hero-секцией высотой 100vh. Перед передачей макета в разработку необходимо указать физический размер элемента в техническом задании. С помощью конвертера он узнаёт, что 100vh на Full HD 24" мониторе соответствует 29,82 см, а на iPhone 15 — 14,71 см. Эти данные позволяют корректно подготовить графические ресурсы для разных устройств.

📐 Расчёт размеров модального окна

Фронтенд-разработчик задаёт модальному окну максимальную высоту 80vh и хочет убедиться, что на экранах пользователей оно не будет слишком маленьким или слишком большим. Конвертер показывает: 80vh на MacBook Air 13" — это 8,55 см, а на мониторе 27" QHD — 26,85 см. Это помогает подобрать оптимальные пропорции для контента внутри модального окна.

🖨️ Подготовка веб-страницы к печати

При создании print-стилей верстальщику нужно понять, сколько контента поместится на одном листе А4 (высота 29,7 см). Конвертер помогает рассчитать, что на экране Full HD 24" высота 100vh практически равна высоте листа А4, а на мониторе 32" — превышает её. Это позволяет корректно настроить разрывы страниц в CSS print-стилях.

📱 Адаптация под мобильные устройства

UX-дизайнер проверяет, достаточен ли размер кнопки высотой 8vh для удобного нажатия на смартфоне. Конвертер показывает, что 8vh на iPhone 15 равно 1,18 см, что соответствует рекомендуемому минимальному размеру тач-зоны. На Samsung Galaxy S24 это значение составит 1,14 см — также в пределах нормы.

Частые вопросы о конвертации vh в сантиметры

Что такое единица vh и чему она равна?
VH (viewport height) — это единица измерения в CSS, равная 1% от высоты видимой области браузера. Значение 1vh означает одну сотую часть высоты viewport. Например, если окно браузера имеет высоту 800 пикселей, то 1vh = 8 пикселей, а 100vh = 800 пикселей, то есть вся высота экрана. Единица vh используется для создания адаптивных макетов, которые масштабируются пропорционально размеру экрана.
Как перевести vh в сантиметры вручную?
Для ручного перевода vh в сантиметры нужно знать два параметра: высоту viewport в пикселях и DPI экрана. Формула: сначала вычислите пиксели (px = vh viewport_height / 100), затем переведите в сантиметры (cm = px / DPI 2,54). Наш конвертер выполняет этот расчёт автоматически, определяя параметры вашего экрана или используя данные выбранного устройства из пресетов.
Почему одно и то же значение vh даёт разный результат на разных экранах?
Единица vh привязана к высоте viewport, которая зависит от разрешения экрана, размера окна браузера и наличия элементов интерфейса (адресная строка, панель задач). Физический размер в сантиметрах дополнительно зависит от плотности пикселей (DPI) экрана. На мониторе 24" Full HD пиксели крупнее, чем на экране Retina, поэтому одинаковое количество vh будет занимать разное физическое пространство.
Что такое DPI и зачем он нужен при конвертации?
DPI (dots per inch) — это плотность пикселей экрана, показывающая количество точек на один дюйм. Для перевода пикселей в физические единицы (сантиметры или дюймы) необходимо знать DPI устройства. Например, монитор Full HD 24" имеет DPI около 92, а экран Retina MacBook Pro — около 227. Чем выше DPI, тем мельче каждый пиксель и тем меньшую физическую площадь занимает одинаковое количество пикселей.
Почему на мобильных устройствах 100vh не равно высоте экрана?
На мобильных устройствах адресная строка браузера, панель навигации и другие элементы интерфейса уменьшают видимую область страницы. Классическая единица vh рассчитывается на основе начального размера viewport и может не учитывать динамические изменения. В CSS появились новые единицы: svh (малый viewport), lvh (большой viewport) и dvh (динамический viewport), которые решают эту проблему. Наш конвертер использует актуальное значение window.innerHeight для максимальной точности.
Насколько точен результат конвертации?
Точность зависит от корректности определения DPI экрана. При использовании пресетов устройств результат максимально точен, так как физические размеры экранов известны. При автоматическом определении возможна погрешность, связанная с тем, что браузеры не всегда точно сообщают физическую плотность пикселей. Для повышения точности используйте ручную настройку DPI или выберите пресет вашего устройства из списка.
Мои данные отправляются на сервер?
Нет. Все расчёты выполняются исключительно в вашем браузере с помощью JavaScript. Параметры экрана определяются локально через стандартные API браузера (window.innerHeight, window.devicePixelRatio). Никакие данные не передаются на сервер и не сохраняются. Вы можете использовать конвертер даже без подключения к интернету после загрузки страницы.

Полезная информация

Конвертер vh в сантиметры регулярно обновляется. В базу пресетов добавляются новые модели устройств по мере их выхода.

Все вычисления производятся локально в браузере без отправки данных на сервер. Инструмент доступен бесплатно и не требует регистрации. Если у вас есть предложения по добавлению новых устройств или улучшению функционала, пожалуйста, свяжитесь с нами через форму обратной связи.

Комментарии (1)

Был ли полезен этот инструмент?
Руслан Авдеев (автор проекта)1 янв. 2024 г., 00:00
🎉 Спасибо, что используете наши инструменты! Все инструменты на ToolFox полностью бесплатны и постоянно улучшаются. 📝 Пожалуйста, оставляйте комментарии: - Если инструмент работает некорректно - Если есть идеи по улучшению - Поделитесь своим опытом использования 👍 Ставьте лайки/дизлайки - это помогает мне понять, какие инструменты нуждаются в доработке. Я обновляю сайт каждую неделю на основе вашей обратной связи. ⭐ Если вам нравится ToolFox — буду благодарен за отзыв о сайте в Яндекс.Браузере (нажмите на ⋮ → «Оценить сайт» в панели браузера). Это помогает другим людям находить наши инструменты! 😊 Также вы можете написать мне напрямую в Telegram: @avdeevrus Все доработки и улучшения по вашим пожеланиям делаю бесплатно! Благодарю за доверие и использование ToolFox! 🚀

📏Похожие инструменты