vh, vw, vmin, vmax — это относительные единицы измерения. Эти единицы вычисляются относительно размеров окна браузера.


PX в VW онлайн калькулятор

В настоящее время с современным CSS у нас есть новые функции, такие как единицы просмотра. Это открывает возможность гибкого подхода к определению шрифта или других размеров. Это очень полезно, и каждый разработчик, создающий адаптивные веб-сайты, должен знать об этой опции. Это уже безопасный метод для старых браузеров, поэтому вы можете использовать его в каждом проекте.
Единица ширины области просмотра «vw» — это сокращение от «ширина области просмотра» и процентное значение ширины области просмотра.

ПИКСЕЛИ: PX

Пиксель (px) — это самая основная, абсолютная и окончательная единица измерения.

Количество пикселей задается в настройках разрешения экрана, один пиксель — это всего лишь один такой пиксель на экране. Браузер в конечном итоге преобразует все значения в пиксели.

Пиксели могут быть дробными, например, размер можно установить на 16,5 пикселей. Это совершенно нормально, сам браузер использует дробные пиксели для внутренних вычислений. Например, есть элемент шириной 100 пикселей, его нужно разделить на три части — волей-неволей появятся 33,333… пикселя. При окончательном рендеринге дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых на экране много пикселей, но сам экран небольшой, браузер автоматически применяет масштабирование для обеспечения удобочитаемости.

ОТНОСИТЕЛЬНО ЭКРАНА: VW, VH

Все современные браузеры, кроме IE8, поддерживают новые относительные единицы измерения CSS:

    • vw (Viewport Width) — 1% ширины окна
    • vh (Viewport Height) — 1% от высоты окна
    • vmin (Viewport Minimum) — наименьшее из (vw, vh), в IE9 обозначается как vm. Процентная величина от ширины или высоты области просмотра, в зависимости от того, которая из двух меньше.
    • vmax (Viewport Maximum) — наибольший из (vw, vh). Процентная величина от ширины или высоты области просмотра, в зависимости от того, которая из двух больше.


Эти относительные единицы измерения были созданы специально для поддержки мобильных устройств.

Их главное преимущество состоит в том, что любые указанные в них размеры автоматически масштабируются при изменении размера окна.