Единицы измерения Viewport

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

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

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

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

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

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

vmax (viewport maximum): Представляет 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>). Ваша задача — использовать единицы измерения viewport, чтобы сделать эти элементы адаптивными. Выполните следующие шаги:

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

Шпаргалка

Единицы измерения viewport (области просмотра) — это относительные единицы, основанные на размере области просмотра браузера, которые полезны для создания адаптивного дизайна.

Четыре единицы измерения viewport:

vw (viewport width): 1% ширины области просмотра
vh (viewport height): 1% высоты области просмотра
vmin (viewport minimum): 1% от меньшего измерения области просмотра
vmax (viewport maximum): 1% от большего измерения области просмотра

Базовый синтаксис:

selector {
    property: value;
}

Пример:

.box {
    width: 50vw; /* 50% of viewport width */
    height: 30vh; /* 30% of viewport height */
}

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

<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>