Единицы viewport

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 64 из 76.

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

Существует четыре единицы измерения области просмотра:

vw (ширина области просмотра): составляет 1% ширины области просмотра. Например, 10vw равняется 10% ширины области просмотра.

vh (высота области просмотра): составляет 1% высоты области просмотра. Например, 25vh равняется 25% высоты области просмотра.

vmin (минимальный размер области просмотра): составляет 1% от меньшего размера области просмотра (ширины или высоты). Например, если область просмотра шире, чем выше, 5vmin равняется 5% высоты области просмотра.

vmax (максимальный размер области просмотра): соответствует 1% большей стороны области просмотра (ширины или высоты). Например, если область просмотра шире, чем выше, 8vmax равен 8% ширины области просмотра.

Вот базовый синтаксис использования единиц измерения области просмотра:

selector {
    property: value;
}

selector: CSS-селектор, который выбирает HTML-элемент или элементы, стиль которых нужно задать.

property: свойство CSS, которое нужно задать (например, width, height, font-size, margin, padding).

value: Значение, включающее единицы измерения области просмотра (например, 50vw, 75vh, 10vmin, 5vmax).

Например:

.box {
    width: 50vw; /* Ширина блока составит 50% ширины области просмотра */
    height: 30vh; /* Высота блока составит 30% высоты области просмотра */
}

В этом примере элемент .box имеет ширину 50vw и высоту 30vh, поэтому его размеры адаптируются и к ширине, и к высоте области просмотра.

Задание

Легко

Дан HTML-документ с заголовком (<h1>), абзацем (<p>) и блоком (<div>). Твоя задача — использовать единицы измерения области просмотра, чтобы сделать эти элементы адаптивными. Выполни следующие шаги:

Напиши правило CSS для элемента <h1>. Установи для него значение font-size равным 6vw.
Напиши правило CSS для элемента <p>. Установи для него значение font-size равным 4vmin.
Напиши правило CSS для элемента <div>. Установи для него значение width равным 80vw, а значение height — 50vh.

Попробуйте сами

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>