Конвертер единиц видового экрана

• Мгновенное преобразование между всеми единицами видового экрана. Конвертер единиц видового экрана мгновенно преобразует значения между vw, vh, vmin, vmax, dvw, dvh, svw, svh, lvw, lvh и другими, а также px, rem, em, pt, процентами и физическими единицами. Каждое нажатие клавиши обновляет все результаты в режиме реального времени без необходимости нажатия кнопки.
• Предварительные настройки реальных устройств и пользовательская область просмотра: выберите одну из 11 предустановок устройства — iPhone, iPad, Pixel, Galaxy и несколько размеров рабочего стола — или введите собственные размеры области просмотра. Посмотрите, как именно ваши значения CSS ведут себя на разных точках останова, не переключая DevTools браузера.
• Все единицы измерения в одном представлении: просматривайте все преобразования единиц одновременно в прокручиваемой таблице результатов. В каждой строке отображается имя единицы измерения и преобразованное значение с помощью кнопки копирования одним щелчком мыши. Основной результат хорошо виден в контексте текущих размеров видового экрана.
• Быстрые настройки значений CSS: быстро выбирайте из 17 распространенных значений CSS (1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 100), чтобы мгновенно увидеть, какой эквивалент находится в каждой единице просмотра — идеально подходит для рабочих процессов адаптивного дизайна.

• Разработка адаптивного CSS. Разработчики внешнего интерфейса используют конвертер единиц просмотра для преобразования значений пикселей макета дизайна в адаптивные единицы просмотра (vw, vh, vmin, vmax). Преобразуйте размеры шрифтов, интервалы и размеры элементов в разных размерах области просмотра без ручных вычислений.
• Адаптивный дизайн, ориентированный на мобильные устройства. Мобильные дизайнеры используют конвертер единиц просмотра, чтобы гарантировать, что значения CSS работают на разных размерах телефонов. Проверьте, как размер шрифта 5vw отображается на iPhone SE (375 пикселей) и Pixel 7 (412 пикселей), и соответствующим образом настройте его для обеспечения единообразия типографики.
• Планирование планшетов и точек останова. Дизайнеры и разработчики используют конвертер единиц видового экрана для планирования адаптивных точек останова. Узнайте, как ведут себя единицы области просмотра на iPad (744–834 пикселей) и размерах планшетов, чтобы обеспечить плавное масштабирование между макетами для мобильных устройств и настольных компьютеров.
• Передача от проекта к коду: дизайнеры используют конвертер единиц видового экрана во время передачи от проекта к разработке. Преобразуйте значения пикселей Figma в эквивалентные единицы области просмотра при целевом размере области просмотра, предоставляя разработчикам точные значения CSS, соответствующие замыслу дизайна.
• Макеты большого экрана и рабочего стола. Разработчики настольных компьютеров используют конвертер единиц видового экрана для проверки значений CSS при обычных размерах рабочего стола — 1024 пикселей, 1280 пикселей, 1366 пикселей, 1440 пикселей и 1920 пикселей. Убедитесь, что макеты на базе vw правильно масштабируются от стандартных ноутбуков до сверхшироких мониторов.
• Системы размера шрифта и интервалов. Разработчики систем дизайна используют конвертер единиц видового экрана для создания адаптивных масштабов шрифтов и интервалов. Преобразование между rem (относительно корня), vw (относительно области просмотра) и px (абсолютно) для создания согласованных токенов дизайна, которые предсказуемо масштабируются.

Единицы области просмотра CSS — это относительные единицы длины, которые рассчитываются на основе размера области просмотра — видимой области веб-страницы в окне браузера. Существует три категории единиц просмотра. Классические единицы измерения ( vw , vh , vmin , vmax ) основаны на начальном содержащем блоке. Новые единицы измерения, добавленные в CSS Values ​​Level 4, обеспечивают более точное управление: dvw/dvh (динамический — реагирует на изменения браузера Chrome), svw/svh (маленький — использует минимально возможное окно просмотра) и lvw/lvh (большой — использует максимально возможное окно просмотра). Наш конвертер единиц видового экрана позволяет конвертировать все эти единицы длины в другие единицы длины CSS, помогая уверенно создавать адаптивные проекты.

1. Введите свое значение: введите числовое значение и выберите исходную единицу измерения (например, 16 vw). Используйте общие настройки значений CSS, чтобы быстро протестировать стандартные значения интервалов, такие как 8, 16, 24, 32, 48 и 64.
2. Установите размер области просмотра: выберите предустановку устройства (iPhone, iPad, размеры рабочего стола) или введите собственную ширину и высоту области просмотра. Размер корневого шрифта (для rem) и размер родительского шрифта (для em) также можно настроить. Все конверсии обновляются мгновенно при изменении любых настроек.
3. Прочтите результаты: основное преобразование (в пиксели) отображается на видном месте, а полная таблица результатов отображает эквивалентное значение во всех поддерживаемых единицах — единицах области просмотра, единицах относительно шрифта, физических единицах, процентах и ​​т. д. Копируйте отдельные значения или все значения сразу одним щелчком мыши.

• Классические единицы просмотра (vw, vh, vmin, vmax): 1vw = 1% ширины области просмотра, 1vh = 1% высоты области просмотра, 1vmin = 1% меньшего размера (полезно для обеспечения соответствия элементов в обеих ориентациях) и 1vmax = 1% большего размера. Они основаны на начальном содержащем блоке и имеют отличную поддержку браузеров.
• Динамические единицы области просмотра (dvw, dvh, dvmin, dvmax). Эти единицы реагируют на динамические изменения размера области просмотра, вызванные появлением или исчезновением хрома браузера (адресная строка, панели инструментов) при прокрутке пользователем. В мобильных браузерах 100dvh дает фактическую видимую высоту, включая динамические изменения, решая классическую проблему «100vh включает адресную строку».
• Маленькие и большие единицы области просмотра (svw, svh, lvw, lvh). Маленькие единицы области просмотра используют минимально возможный размер области просмотра (с полностью видимым хромом браузера). Большие единицы области просмотра используют максимально возможный размер области просмотра (со скрытым браузером Chrome). Использование 100svh гарантирует, что ваш элемент поместится даже при отображении адресной строки, а 100lvh заполнит весь экран после прокрутки пользователем.
• Физические единицы и единицы, относящиеся к шрифту: px (пиксели CSS), pt (точки), см, мм, дюймы (дюймы), pc (пики), q (четверть миллиметра), rem (корневой em), em (родительский em), ch (ширина символа «0») и ex (x-высота «x»). Конвертер единиц просмотра обрабатывает все это вместе с единицами просмотра для полного преобразования длины CSS.

Единицы области просмотра являются мощными, но требуют осторожного использования:

• Типографика: используйте зажим() с единицами измерения vw для обеспечения адаптивных размеров шрифта, которые остаются в пределах минимального/максимального значения — например, Font-size: Clamp(16px, 2vw, 24px) . Используйте конвертер, чтобы найти правильное значение vw для вашего целевого размера пикселя.
• Полноразмерные элементы: на мобильных устройствах высота: 100vh может быть больше видимой области из-за браузера Chrome. Рассмотрите возможность использования 100dvh (динамический) или 100lvh (большой) для полноэкранных макетов.
• Избегайте чрезмерного использования основного текста: единицы просмотра в основном тексте могут вызвать проблемы с доступностью, поскольку пользователи не могут изменять размер текста, в котором используются единицы vw, в некоторых браузерах. Используйте rem для основного текста и оставьте vw для заголовков и больших элементов.
• Тестируйте на нескольких точках останова: значение, которое работает при разрешении 1440 пикселей, может быть слишком большим при разрешении 375 пикселей или слишком маленьким при разрешении 2560 пикселей. Используйте конвертер единиц видового экрана с различными предустановками устройств, чтобы проверить значения во всем диапазоне размеров видового экрана.