Перевести vw в px Viewport width ↔ Pixels Бесплатно Онлайн Безопасно

Зачем конвертировать vw в px

В таблице стилей написано font-size: 5.2vw для заголовка на главном экране, margin-top: 8vw для раздела и width: 42vw для картинки. Это гибкие значения, и они не говорят, что именно окажется на экране. Насколько велик заголовок на телефоне? Какой ширины картинка на ноутбуке? Подходит ли отступ при 1920 пикселях? Чтобы выяснить это, вы конвертируете vw в px: умножаете число на ширину окна, делите на сто и читаете ответ в единице, которой пользуются дизайнеры, тестировщики и заказчики. Так поступают, когда проверяют гибкий код, сверяют сборку с макетом или объясняют коллеге, почему заголовок выглядит мелким на узком экране.

Отличие этого преобразования от rem или em в том, что множитель здесь — само окно. Один vw — это одна сотая ширины области просмотра, поэтому 5,2vw — это 52 px в окне шириной 1000 px, 18,7 px на телефоне шириной 360 px и 99,8 px на широком мониторе шириной 1920. Запасного значения по умолчанию нет, а ширина меняется, когда читатель поворачивает телефон или тянет окно. Поэтому конвертер запрашивает ширину, показывает её рядом с ответом и стартует с 1440 px — ширины, на которой часто рисуют макеты.

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

Формула и ширина

px равно vw, умноженному на ширину и делённому на сто

Формула такова: px = vw × ширина ÷ 100. При ширине 1440 px значение 10 vw превращается в 144 px, 5 vw — в 72 px, а 1,667 vw — в 24 px. Страница выводит ширину рядом с результатом, поэтому строка вроде 10 vw = 144 px (1440 px) говорит, что было принято. Чтобы увидеть другой экран, измените ширину и прочитайте результат снова.

Какие ширины стоит пробовать

Полезный набор для проверки — 360 или 390 для телефонов, 768 для планшета в портретной ориентации, 1024 для небольшого ноутбука, 1440 для типичного ноутбука или настольного компьютера и 1920 для монитора Full HD. Введите каждую в поле ширины и отметьте результат. Пять показаний показывают весь диапазон значения, и любой крайний скачок бросается в глаза.

Использование ширины настоящего окна

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

Что преобразование сохраняет, а что нет

Оно сохраняет долю экрана

Один vw — это одна сотая ширины области просмотра, поэтому размер, записанный в vw, растёт и уменьшается вместе с окном, а не остаётся на месте. Значение в пикселях, которое вы получаете, — это эта доля, ставшая конкретной для одной определённой ширины.

Оно не может дать значение по умолчанию

В отличие от rem, у vw значения по умолчанию нет. Браузер задаёт корневому размеру шрифта 16 px, если никто не говорит иначе, поэтому страница с rem может начать с реального числа; ширина области просмотра — это просто то, насколько широко окно читателя, и она меняется, когда он поворачивает телефон. 1440 px здесь — ширина, на которой часто рисуют макеты, привычка, а не стандарт. Введите свою.

Округление

Умножение на ширину и деление на 100 могут дать десятичные дроби. 6,67 vw при 1440 px — это 96,048 px. Браузеры справляются с дробными пикселями, но если для файла макета нужно целое число, округлите и отметьте, что округление ваше.

Чтение гибкой таблицы стилей

Возьмите три ширины и запишите результаты

Выберите узкую, среднюю и широкую ширину, например 375, 1024 и 1920. Для каждого важного значения vw в таблице стилей конвертируйте vw в px на каждой ширине и запишите три числа в заметку. Заголовок в 5.2 vw даёт 19,5, 53,2 и 99,8 пикселя. Увидев так, вы знаете, читается ли заголовок на узком конце и не подавляет ли на широком.

Ищите clamp

Хорошо написанный гибкий код ставит пределы вокруг vw с помощью clamp(min, preferred, max). Если вы видите clamp(2rem, 1rem + 4vw, 6rem), размер растёт между 32 и 96 px и удерживается на обоих концах. Когда вы конвертируете часть vw, помните, что это лишь середина диапазона, а пределы решают, что происходит на краях.

Проверьте крайности

Рискованные ширины — самая малая и самая большая. При 320 px заголовок в 6 vw составляет 19 px; при 2560 — 154 px. Если ни то ни другое не выглядит приемлемо, а clamp нет, таблице стилей нужны пределы.

Ловушки при конвертации vw в px

Полоса прокрутки

В настольных браузерах ширина области просмотра, используемая для vw, включает ширину вертикальной полосы прокрутки. Поэтому 100vw немного шире видимой области, когда страница прокручивается, примерно на 15–17 пикселей во многих системах. Вычисленное вами значение в пикселях поэтому слегка больше видимой ширины, которую оно, казалось бы, представляет. На телефонах, где полосы прокрутки накладываются на страницу, этого эффекта нет.

Не та ширина

Результат верен лишь настолько, насколько верна введённая вами ширина. Если ваше тестовое окно шириной 1366 px, а вы конвертируете при 1440, каждое значение будет ошибочным примерно на пять процентов. Читайте настоящую ширину из инструментов разработчика.

Путаница vw с процентами

Ширина 50% относится к ширине родителя, а 50vw — к окну. Внутри узкого контейнера это две очень разные вещи. Конвертер даёт ответ для vw; если ваш элемент внутри контейнера, родитель может быть уже окна.

Забывание, что текст в vw нельзя увеличить

Текст, размер которого задан только в vw, не реагирует, когда читатель увеличивает страницу, потому что окно и текст масштабируются вместе. Руководства по доступности требуют, чтобы текст можно было изменять в размере. Добавьте слагаемое в rem, как в clamp(), чтобы текст реагировал и на увеличение.

Вопросы, которые задают перед конвертацией

Сколько пикселей в 1 vw?

Одна сотая ширины окна: 14,4 px при 1440, 10 px при 1000, 3,6 px при 360.

Сколько пикселей в 50 vw?

Половина окна: 720 px при ширине 1440, 500 px при ширине 1000.

Почему моя страница шире экрана?

Блок в 100vw на прокручиваемой странице шире видимой области, потому что полоса прокрутки учитывается. Используйте вместо этого 100% внутри контейнера.

Совпадает ли vw с процентами?

Нет. Проценты относятся к родителю, vw — к окну.

Загружается ли моё число?

Нет. Арифметика выполняется в вашем браузере, и ничего никуда не отправляется.

Как вернуться обратно?

С помощью px в vw, который делит на ширину вместо умножения.

Распространённые значения на распространённых ширинах

Мысленная таблица

Полезно знать несколько опорных значений, чтобы оценивать до использования конвертера. При ширине 1000 px 1 vw равен 10 px, что делает арифметику тривиальной: 2,5 vw — это 25 px, 8 vw — 80 px. При 1440 px 1 vw равен 14,4 px. При 375 px 1 vw равен 3,75 px, так что заголовок в 8 vw — это 30 px. Когда вы конвертируете vw в px для быстрой проверки, начните с одного из этих опорных значений и масштабируйте.

Три ширины, одна таблица стилей

Возьмём карточку шириной 80vw, с промежутком 4vw и заголовком 6vw. На телефоне в 375 px они составляют 300 px, 15 px и 22,5 px. На планшете в 768 px — 614 px, 30,7 px и 46 px. На настольном компьютере в 1440 px — 1152 px, 57,6 px и 86,4 px. Увидев все три рядом, вы сразу понимаете, что карточка на настольном компьютере слишком широка, а заголовок слишком велик, и что вам, вероятно, нужны максимальная ширина и clamp.

За пределами области просмотра

Единицы контейнера

Новый CSS предлагает единицы относительно контейнера, а не окна, например cqw, которая равна одной сотой ширины контейнера. Они решают проблему того, что компонент, помещённый в узкую боковую панель, ведёт себя так, будто у него целое окно. Если вы ими пользуетесь, арифметика та же, что для vw, с шириной контейнера в качестве основы, и вы можете использовать этот конвертер, введя эту ширину.

Малые, большие и динамические области просмотра

На телефонах видимая область меняется, когда адресная строка уезжает. Для высоты более новые единицы svh, lvh и dvh описывают малую, большую и динамическую области просмотра. Для ширины ситуация проще, так как адресная строка на неё не влияет, и vw стабильна. Это ещё одна причина, почему vw — более безопасная единица, чем vh, для гибкого дизайна на мобильных устройствах.

Проценты, vw и сетка

Ширины в процентах следуют за родителем, vw — за окном, а CSS grid и flexbox — за доступным пространством. Часто лучшие гибкие макеты используют grid и проценты для структуры, а vw лишь для шрифта и отступов, потому что именно им полезно напрямую следовать за экраном. Когда вы конвертируете vw в px, чтобы проверить макет, спросите себя, не сказала бы дорожка сетки то же самое надёжнее.

Как объяснить vw людям, которые не пишут CSS

Используйте окно как линейку

Заказчики и коллеги обычно понимают идею, как только вы скажете, что vw — это один процент ширины экрана. Заголовок в 5 vw имеет ширину в пять процентов экрана. Затем покажите им два числа: во что он превращается на их собственном телефоне и на большом мониторе в переговорной. Когда вы конвертируете vw в px для обеих ширин и произносите результаты вслух, идея размера, который движется вместе с экраном, становится конкретной.

Скажите, почему дизайн не фиксирован

Нетехнические участники проекта иногда спрашивают, почему бы просто не задать заголовку один размер. Ответ в том, что экраны различаются в семь-восемь раз между самым маленьким телефоном и самым большим монитором, и фиксированный размер, подходящий одному, неверен для другого. Гибкие единицы — ответ, а цифры в пикселях на этой странице показывают, насколько экран меняет одно и то же значение.

Откуда берутся эти единицы

CSS-пиксель

Когда у дисплеев перестала быть предсказуемая плотность, страница, измеренная в настоящих пикселях, превратилась в страницу, сжимающуюся по мере того, как экраны становились чётче. Поэтому CSS-пиксель переопределили как эталонную длину: примерно 1/96 дюйма, видимого с удобного расстояния для чтения. Это единица, в которой эта страница даёт ответы.

Единицы области просмотра

Единица vw появилась вместе с адаптивным дизайном: одна сотая ширины области просмотра, какой бы она ни оказалась. Она стоит рядом с rem, которая отсчитывается от размера корневого шрифта, и с em, которая отсчитывается от элемента. Чтобы увидеть, как то же значение в пикселях выглядит в этих единицах, конвертируйте rem в px и сравните.

Привычки, которые делают гибкий код понятным

Комментируйте значения в пикселях

Строка вроде font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ стоит нескольких слов и экономит следующему читателю несколько преобразований.

Держите ширину макета в одном месте

Если в вашем проекте есть пользовательское свойство для ширины, на которой рисовали макет, каждое значение vw можно отследить до него. Когда вы конвертируете vw в px для проверки, вы знаете, какую ширину использовать.

Используйте vw умеренно

Короткий список значений vw легко осмыслить. Таблицу стилей, где всё в vw, — нет. Оставьте их для крупного шрифта, больших промежутков и графики.

Проверяйте на настоящих устройствах, когда это важно

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

Родственные конвертеры

Это же семейство инструментов охватывает соседние преобразования. Чтобы вернуться к vw, используйте px в vw. Для размеров относительно корня есть px в rem и rem в px, а для размеров относительно элемента — px в em и em в px. Для цветов той же таблицы стилей нотации обрабатывают HEX в RGB и RGB в HEX.

Разобранный пример

Допустим, тестировщик сообщает, что заголовок на главном экране трудно читать на маленьком телефоне. В таблице стилей написано font-size: 5.2vw без ограничений. Вы конвертируете vw в px при 360 и читаете 18,7 px, при 768 читаете 39,9 px, при 1440 читаете 74,9 px. На узком конце заголовок лишь немного крупнее основного текста и уже не воспринимается как заголовок. Вы предлагаете clamp(2rem, 1rem + 4vw, 5rem), что даёт 32 px на самой узкой ширине, около 51 px при 768 и 5rem, то есть 80 px, на самой широкой. Тестировщик подтверждает, что теперь читается хорошо, а заголовок по-прежнему масштабируется.

Короткий чек-лист

Перед конвертацией

Выберите ширины, которые вас интересуют, из инструментов разработчика или из списка целевых устройств.

Во время конвертации

Вводите значение vw и каждую ширину по очереди и отмечайте пиксели, показанные рядом с основой.

После конвертации

Посмотрите на крайности. Если размер слишком мал или слишком велик на любом конце, добавьте пределы с помощью clamp().

Распространённые ошибки

Предположение, что ответ единственный

У значения vw на каждой ширине свой размер в пикселях. Указывайте ширину при каждой цифре.

Забывание про полосу прокрутки

100vw включает её, поэтому блок на всю ширину может выходить за границы.

Задание размера основного текста только в vw

Его нельзя увеличить. Добавьте слагаемое в rem и пределы.

Ваши числа остаются на вашем устройстве

Расчёт выполняется локально. Ваши значения используются вашим браузером, и ничего никуда не отправляется. Потом нечего удалять, и не нужно создавать учётную запись. Это простой способ конвертировать vw в px.

Итог

Чтобы конвертировать vw в px здесь, введите размер в vw и ширину окна и сразу прочитайте результат в пикселях по формуле px = vw × ширина ÷ 100. Ширина начинается с 1440 px, на которой часто рисуют макеты, но это привычка, а не стандарт, так что введите свою. Преобразование сохраняет долю экрана: один vw — это одна сотая ширины области просмотра, поэтому размер в vw растёт и уменьшается вместе с окном. В отличие от rem, у vw нет значения по умолчанию, поскольку область просмотра имеет ту ширину, какая у окна читателя. Для текста сочетайте vw с rem внутри clamp(), чтобы он оставался читаемым и масштабируемым. Ничего не загружается.