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

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

Дизайнер присылает макет, нарисованный шириной 1440 px, с hero-заголовком в 96 px и промежутком между разделами в 72 px. В реальном вебе страницу увидят в 360 px на телефоне, 820 px на планшете и 2560 px на большом мониторе, и дизайнер хочет, чтобы заголовок сохранял свою пропорцию к экрану на каждом из них. Единица, созданная для этого, — ширина области просмотра, vw, а путь к ней от макета — конвертировать px в vw: вы берёте значение в пикселях, делите его на ширину, в которой нарисован дизайн, и умножаете на сто. Заголовок в 96 px на холсте в 1440 px — это 6,67 vw, и с этого момента он всегда составляет 6,67 процента от любого экрана.

Таково обещание единицы области просмотра, а также её риск. Rem и em начинаются с размера шрифта, который браузер устанавливает в разумное значение по умолчанию. У vw нет значения по умолчанию вообще: ширина области просмотра — это просто то, насколько широко окно читателя, и она меняется, когда он поворачивает телефон или тянет окно. Поэтому конвертер не прячет единственное число, от которого зависит ответ. Ширина дизайна стоит в поле, начиная с 1440 px, и её можно изменить под ваш макет.

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

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

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

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

Откуда берётся 1440

1440 px здесь — ширина, в которой часто рисуют дизайны, привычка, а не стандарт. Некоторые команды рисуют в 1280, многие в 1920, а мобильные дизайны — в 375 или 390. Верного ответа нет, есть только ширина, которую использует ваш файл дизайна. Введите свою: конвертация настолько хороша, насколько хороша ширина, которую вы ей дали.

Использование собственной ширины дизайна

Если макет нарисован в 1920 px, введите 1920, и тот же заголовок в 96 px становится 5 vw. Если вы конвертируете px в vw с неверной шириной, страница будет выглядеть верно при одном размере экрана и неверно при всех остальных, а это сбивающая с толку ошибка, когда не знаешь, где искать.

Что конвертация сохраняет и чего не может

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

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

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

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

Округление

Деление на 1440 даёт длинные десятичные дроби для большинства размеров. Значение вроде 6,6667 vw годится в таблице стилей, но можно округлить до 6,67 или 6,7 без видимых изменений. Оставляйте две-три цифры после запятой; больше — шум.

Где единицы области просмотра помогают

Hero-заголовки и крупный акцидентный шрифт

Заголовок, который должен занимать заданную долю экрана на каждом устройстве, — классическое применение. При ширине телефона фиксированный заголовок в 96 px переполнил бы строку; в vw он уменьшается вместе с экраном и остаётся в одной строке.

Разделы во всю ширину

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

Графика, которая должна сохранять форму

Hero-изображения, иллюстрации и декоративные фигуры, заданные в vw, сохраняют пропорции к окну, поэтому композиция не рассыпается при смене экрана.

Плавающий шрифт с пределами

В сочетании с clamp() vw даёт шрифт, плавно растущий между минимумом и максимумом. Это приём, который современные таблицы стилей используют для заголовков, и он рассмотрен ниже.

Где единицы области просмотра вредят

Основной текст в чистом vw

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

Крошечные и огромные крайности

При ширине 320 px заголовок в 6,67 vw составляет 21 px, что может быть слишком мелко. При ширине 2560 px он составляет 171 px, что огромно. Без пределов пропорция, выглядевшая верно при 1440, может быть абсурдной по краям.

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

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

Приём clamp

Установка нижнего и верхнего пределов

Функция CSS clamp(min, предпочтительное, max) принимает минимум, предпочтительное значение и максимум. Для шрифта запишите минимум и максимум в rem, а предпочтительное значение — в vw плюс член в rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). Размер растёт вместе с окном между 32 и 96 px и никогда не выходит за любой из концов. Поскольку часть его в rem, текст по-прежнему уважает настройки читателя.

Как построить средний член

Выберите две ширины экрана и размеры, которые вы хотите при каждой. Например, 32 px при ширине 360 px и 96 px при ширине 1440 px. Наклон — (96 − 32) ÷ (1440 − 360) = 0,0593 px на px ширины, то есть 5,93 vw, а свободный член — 32 − 0,0593 × 360 = 10,67 px, около 0,667 rem. Предпочтительный член поэтому — 0.667rem + 5.93vw. Конвертер помогает с частью vw, а минута арифметики делает остальное.

Почему это верный баланс

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

Как конвертировать px в vw здесь

Введите значение в пикселях

Введите размер в пикселях в первое поле. Десятичные дроби принимаются.

Задайте ширину дизайна

Оставьте 1440, если это ширина вашего макета. Измените, если нет. Результат обновляется по мере ввода.

Скопируйте значение vw

Используйте цифру в вашем CSS с единицей, как в font-size: 6.67vw. Для текста поместите её внутрь clamp() вместе с пределами в rem.

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

Пиксель CSS

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

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

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

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

Использование неверной ширины дизайна

Самая частая ошибка. Если ваш макет шириной 1920, а вы конвертируете с 1440, каждый размер ошибочен на треть. Подтвердите ширину кадра в вашем инструменте дизайна.

Забытый мобильный дизайн

У многих команд два макета, один для компьютера и один для телефона. Заголовок, который 96 px в первом и 40 px во втором, — не одно значение vw. Используйте две ширины, две конвертации и clamp, чтобы их соединить.

Вся страница в vw

Страница, где всё масштабируется вместе с окном, теряет ощущение чтения: строки становятся слишком длинными на широких экранах, а текст слишком мелким на узких. Используйте vw для немногого, что должно масштабироваться, а для остального — фиксированные размеры или rem.

Игнорирование проблемы масштабирования

Проверьте страницу с браузером, увеличенным до 200 процентов. Если текст не растёт, размерам нужен член в rem.

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

Сколько vw составляют 100 px?

При ширине дизайна 1440 px около 6,94 vw.

Какую ширину дизайна лучше использовать?

Ту, в которой нарисован ваш макет. Универсального значения по умолчанию нет.

Лучше ли vw, чем rem?

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

Можно ли использовать vw для размера шрифта?

Да, но поместите его внутрь clamp() с пределами в rem, чтобы текст оставался читаемым и его по-прежнему можно было увеличивать.

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

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

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

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

Разумный выбор, когда вы конвертируете px в vw

Решите, что должно масштабироваться вместе с экраном

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

Конвертируйте на этапе дизайна

Если вы конвертируете px в vw, читая макет, вы сразу видите, какие значения выходят странными, и можете попросить дизайнера о более аккуратных. Заголовок, оказавшийся 6,6667 vw, приглашает к разговору о том, чтобы сделать его 6,5 или 7.

Ведите запись о ширине

Запишите ширину дизайна в комментарии в начале таблицы стилей, чтобы каждый, кто конвертирует позже, использовал ту же. Смешанные ширины дают страницу, непоследовательную так, что никто не может толком объяснить.

От макета к плавающей таблице стилей

Перечислите размеры, которые должны масштабироваться

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

Проверьте мобильный кадр отдельно

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

Проверьте при трёх ширинах

Посмотрите на готовую страницу при примерно 360, 820 и 1440 пикселях и один раз при 2560. Плавающие раскладки легко сделать верными при ширине макета и тонко неверными в других местах, а короткий проход по этим ширинам находит большинство проблем раньше посетителя.

Не используйте единицу в длинном тексте

Строки основного текста лучше всего задавать в rem и давать им максимальную длину строки около 60–75 символов. Используйте единицу области просмотра для акцидентного шрифта и отступов, а основному тексту дайте быть устойчивым.

Связанные конвертеры

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

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

Допустим, посадочная страница спроектирована в 1440 px, с hero-заголовком в 96 px и промежутком в 72 px над ним. Вы вводите 96 и читаете 6,667 vw, вводите 72 и читаете 5 vw. В окне в 1000 px заголовок составляет 66,7 px, а промежуток 50 px, пропорционально. Но на телефоне шириной 360 px заголовок был бы 24 px, что меньше, чем вам нужно, поэтому вы пишете заголовок как clamp(2.25rem, 1rem + 5vw, 6rem), что даёт нижний предел 36 px и верхний 96 px, и он остаётся читаемым и допускает масштабирование. Промежуток, в котором нет текста, остаётся в простом vw.

Короткий контрольный список

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

Узнайте ширину макета. Решите, какие размеры должны масштабироваться, а какие нет.

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

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

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

Измените размер окна от ширины телефона до широкого монитора и увеличьте страницу до 200 процентов. Добавьте пределы через clamp() везде, где крайности выглядят неверно.

Частые ошибки

Предположение, что 1440 — стандарт

Это лишь привычка. Используйте собственную ширину.

Размер основного текста только в vw

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

Забытая полоса прокрутки

100vw шире видимой области на прокручиваемых страницах для компьютеров.

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

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

Итог

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