В веб-дизайне важно создавать адаптивные макеты, которые корректно отображаются на различных устройствах и экранах. CSS предоставляет множество инструментов для этого, и одними из наиболее полезных являются единицы измерения vw, vh, vmin и vmax. Эти единицы измерения зависят от размера окна браузера, что делает их идеальными для создания гибких и адаптивных интерфейсов. В этой статье мы рассмотрим, как работают эти единицы измерения, и приведём примеры их использования. В конце статья я также оставил вам блок бесплатных материалов для обучения разработке.
Что такое vw, vh, vmin и vmax?
vw (viewport width)
Единица измерения vw (viewport width) равна 1% от ширины окна просмотра (viewport). Например, если ширина окна составляет 1000 пикселей, то 1vw будет равен 10 пикселям.
vh (viewport height)
Единица измерения vh (viewport height) равна 1% от высоты окна просмотра. Например, если высота окна составляет 800 пикселей, то 1vh будет равен 8 пикселям.
vmin (viewport minimum)
Единица измерения vmin (viewport minimum) равна 1% от меньшего из размеров окна просмотра, будь то ширина или высота. Если ширина окна составляет 1000 пикселей, а высота — 800 пикселей, то 1vmin будет равен 8 пикселям.
vmax (viewport maximum)
Единица измерения vmax (viewport maximum) равна 1% от большего из размеров окна просмотра. Если ширина окна составляет 1000 пикселей, а высота — 800 пикселей, то 1vmax будет равен 10 пикселям.
Использование vw, vh, vmin и vmax позволяет создавать адаптивные макеты, которые хорошо смотрятся на любом экране. Однако, чтобы в полной мере использовать эти единицы, необходимо хорошо понимать основы HTML и CSS. Если вы хотите детальнее погрузиться в адаптивную верстку и научиться создавать сайты, которые отлично выглядят на всех устройствах — приходите на наш большой курс HTML и CSS. На курсе 212 уроков и 19 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.
Примеры использования vw, vh, vmin и vmax
Адаптивный размер текста
В этом примере размер текста заголовка h1 будет равен 5% от ширины окна просмотра, что обеспечит адаптивность текста на разных экранах.
Полноэкранный фон
В этом примере элемент с классом fullscreen займёт всю ширину и высоту окна просмотра, создавая полноэкранный фон.
Квадратный элемент, адаптирующийся к размеру окна
В этом примере элемент с классом square будет иметь ширину и высоту, равные 50% от меньшего размера окна просмотра, что обеспечит пропорциональность на разных экранах.
Гибкая сетка
В этом примере используется гибкая сетка, где зазоры и отступы элементов зависят от большего размера окна просмотра, что создаёт адаптивный дизайн.
Когда использовать vw, vh, vmin и vmax?
vw и vh
Эти единицы полезны, когда вам нужно задать элементы, которые масштабируются в зависимости от размера окна. Например, для создания адаптивного текста, полноэкранных фоновых изображений или элементов, которые должны занимать фиксированный процент от окна просмотра.
vmin и vmax
Эти единицы полезны, когда вам нужно обеспечить пропорциональность элементов на разных экранах. Например, для создания квадратных или круговых элементов, которые сохраняют свои пропорции независимо от соотношения сторон экрана.
Преимущества использования vw, vh, vmin и vmax
- Они позволяют создавать макеты, которые автоматически подстраиваются под размеры окна просмотра, обеспечивая лучшее отображение на различных устройствах.
- Вы можете использовать их в комбинации с другими единицами измерения для создания сложных и динамичных макетов.
- Использование vw, vh, vmin и vmax упрощает создание элементов, которые изменяют свои размеры в зависимости от окна просмотра, без необходимости писать сложные медиазапросы.
Заключение
Единицы измерения vw, vh, vmin и vmax помогают обеспечить согласованное отображение элементов на различных устройствах и экранах. Освоив использование этих единиц измерения, вы сможете создавать более динамичные и отзывчивые интерфейсы для ваших веб-проектов и плюсом к этому, вы упростите процесс разработки.
vw, vh, vmin и vmax - это полезные инструменты, но они лишь часть арсенала веб-разработчика. Для создания полноценных сайтов необходимо знать HTML, CSS, JavaScript и другие технологии. На нашем курсе HTML и CSS вы получите прочный фундамент для дальнейшего развития в веб-разработке. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир HTML и CSS прямо сегодня.
Бесплатные полезности
1. Смотрите видео: код-ревью, собеседования и новости разработки на нашем Дзене – https://dzen.ru/purpleschool?tab=longs
2. Создайте личный план обучения и получите доступ к базе из 500+ бесплатных уроков в бесплатных картах развития на нашем сайте – https://purpleschool.ru/skills
3. Разберитесь в том, как устроен мир IT на бесплатном курсе «Основы разработки» – https://purpleschool.ru/course/code-basics