Единицы vh и vw: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в использовании единиц измерения `vh` (viewport height) и `vw` (viewport width). Эти единицы позволяют задавать размеры элементов относительно размеров окна просмотра (viewport). Вы будете заполнять пропуски в CSS-коде, чтобы изменять высоту, ширину, размеры шрифта и другие свойства элементов, наблюдая, как они адаптируются к \"размеру экрана\" (в данном случае, к размеру iframe).

Список тем

Высота в процентах от высоты viewport

Задайте элементу с классом `box` высоту, равную 50% от высоты области просмотра (viewport). Элемент должен занять половину доступной высоты.

CSS

.box {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  text-align: center;
  height: 50input1;
}

                     .box {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  text-align: center;
  height: 50input1;
}

HTML

<div class="box">
  Блок с высотой 50vh
</div>

Чтобы задать высоту относительно высоты viewport, используйте свойство `height` и единицу измерения `vh`. 1vh равен 1% высоты viewport. Вам нужно указать значение 50 и единицу `vh`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Ширина в процентах от ширины viewport

Задайте элементу с классом `wide-box` ширину, равную 75% от ширины области просмотра (viewport). Блок должен занимать три четверти доступной ширины.

CSS

.wide-box {
  background-color: #2196F3;
  color: white;
  padding: 10px;
  height: 100px; /* Фиксированная высота для наглядности */
  input1: 75input2;
}

                     .wide-box {
  background-color: #2196F3;
  color: white;
  padding: 10px;
  height: 100px; /* Фиксированная высота для наглядности */
  input1: 75input2;
}

HTML

<div class="wide-box">
  Блок с шириной 75vw
</div>

Для задания ширины относительно ширины viewport используйте свойство `width` и единицу измерения `vw`. 1vw равен 1% ширины viewport. Вам нужно указать значение 75 и единицу `vw`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинация vh и vw

Создайте блок с классом `responsive-square`, который будет иметь высоту 30% от высоты viewport и ширину 40% от ширины viewport.

CSS

.responsive-square {
  background-color: #ff9800;
  color: white;
  padding: 5px;
  text-align: center;
  height: input1;
  width: input2;
}

                     .responsive-square {
  background-color: #ff9800;
  color: white;
  padding: 5px;
  text-align: center;
  height: input1;
  width: input2;
}

HTML

<div class="responsive-square">
  30vh x 40vw
</div>

Используйте свойство `height` с единицей `vh` для высоты и свойство `width` с единицей `vw` для ширины. Укажите значения 30 для `vh` и 40 для `vw`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Адаптивный размер шрифта

Сделайте так, чтобы размер шрифта у заголовка `h1` изменялся в зависимости от ширины viewport. Установите размер шрифта равным 5% от ширины viewport.

CSS

h1 {
  color: #673AB7;
  text-align: center;
  input1: 5input2;
}

                     h1 {
  color: #673AB7;
  text-align: center;
  input1: 5input2;
}

HTML

<h1>Адаптивный заголовок</h1>
<p>Размер этого заголовка зависит от ширины экрана.</p>

Используйте свойство `font-size` и единицу `vw`. Значение 5vw означает, что размер шрифта будет равен 5% от ширины viewport.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Вертикальный отступ с vh

Задайте верхний и нижний внутренние отступы (padding) для элемента с классом `padded-box`, равные 3% от высоты viewport каждый.

CSS

.padded-box {
  background-color: #00BCD4;
  color: white;
  text-align: center;
  width: 80%; /* Ширина для наглядности */
  margin: 10px auto;
  padding-top: input1;
  padding-bottom: input2;
}

                     .padded-box {
  background-color: #00BCD4;
  color: white;
  text-align: center;
  width: 80%; /* Ширина для наглядности */
  margin: 10px auto;
  padding-top: input1;
  padding-bottom: input2;
}

HTML

<div class="padded-box">
  У этого блока вертикальные отступы зависят от высоты экрана.
</div>

Используйте свойство `padding-top` и `padding-bottom` (или сокращенное свойство `padding`) с единицей `vh`. Значение 3vh установит отступ равным 3% от высоты viewport.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Минимальная высота в vh

Установите минимальную высоту для элемента с классом `min-height-box` равной 40% от высоты viewport. Это гарантирует, что блок не будет слишком маленьким по высоте на низких экранах или при малом контенте.

CSS

.min-height-box {
  background-color: #8BC34A;
  color: #333;
  padding: 20px;
  width: 70%;
  margin: 10px auto;
  text-align: center;
  input1: 40input2;
}

                     .min-height-box {
  background-color: #8BC34A;
  color: #333;
  padding: 20px;
  width: 70%;
  margin: 10px auto;
  text-align: center;
  input1: 40input2;
}

HTML

<div class="min-height-box">
  Минимальная высота этого блока - 40vh.
</div>

Используйте свойство `min-height` и единицу `vh`. Значение `40vh` установит минимальную высоту в 40% от высоты viewport.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Элемент на весь экран

Сделайте так, чтобы элемент `div` с id `fullscreen` занимал всю доступную ширину и высоту области просмотра (viewport).

CSS

body {
  margin: 0; /* Убираем отступы по умолчанию */
  padding: 0;
}

#fullscreen {
  background-color: #FF5722;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  height: input1;
  width: input2;
}

                     body {
  margin: 0; /* Убираем отступы по умолчанию */
  padding: 0;
}

#fullscreen {
  background-color: #FF5722;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  height: input1;
  width: input2;
}

HTML

<div id="fullscreen">
  Этот блок занимает весь экран.
</div>

Чтобы элемент занял всю высоту viewport, используйте `height: 100vh`. Чтобы он занял всю ширину, используйте `width: 100vw`. Также убедитесь, что у `body` нет отступов по умолчанию.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Адаптивная ширина изображения

Задайте изображению с классом `responsive-img` ширину, равную 90% от ширины viewport. Высота должна подстраиваться автоматически, сохраняя пропорции.

CSS

.responsive-img {
  display: block; /* Убирает лишний отступ под изображением */
  margin: 10px auto; /* Центрирование и отступы */
  width: 90input1;
  height: auto; /* Сохраняем пропорции */
}

                     .responsive-img {
  display: block; /* Убирает лишний отступ под изображением */
  margin: 10px auto; /* Центрирование и отступы */
  width: 90input1;
  height: auto; /* Сохраняем пропорции */
}

HTML

<img src="https://naytikurs.ru/img/7.png" alt="Пример изображения" class="responsive-img">

Используйте свойство `width` с единицей `vw` для изображения. Установите значение `90vw`. Свойство `height: auto;` (обычно по умолчанию для img) сохранит пропорции.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Размер шрифта относительно высоты

Задайте размер шрифта для параграфа с классом `text-vh` равным 4% от высоты области просмотра (viewport).

CSS

.text-vh {
  color: #3F51B5;
  padding: 10px;
  border: 1px solid #3F51B5;
  margin: 10px;
  font-size: input1;
}

                     .text-vh {
  color: #3F51B5;
  padding: 10px;
  border: 1px solid #3F51B5;
  margin: 10px;
  font-size: input1;
}

HTML

<p class="text-vh">
  Размер этого текста зависит от ВЫСОТЫ окна просмотра. Попробуйте изменить высоту iframe (если возможно) или представьте, как это будет выглядеть на разных по высоте экранах.
</p>

Используйте свойство `font-size` и единицу `vh`. Значение `4vh` сделает размер шрифта равным 4% от высоты viewport.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Максимальная ширина в vw

Ограничьте максимальную ширину элемента с классом `limited-box` значением 80% от ширины viewport. При этом его ширина должна быть 100% от родителя, но не более указанного лимита.

CSS

.limited-box {
  background-color: #E91E63;
  color: white;
  padding: 15px;
  margin: 10px auto; /* Центрирование */
  width: 100%; /* Занимает всю доступную ширину родителя */
  input1: 80input2;
}

                     .limited-box {
  background-color: #E91E63;
  color: white;
  padding: 15px;
  margin: 10px auto; /* Центрирование */
  width: 100%; /* Занимает всю доступную ширину родителя */
  input1: 80input2;
}

HTML

<div class="limited-box">
  Этот блок имеет ширину 100%, но его максимальная ширина ограничена 80vw. Он не станет шире 80% от ширины экрана.
</div>

Используйте свойство `max-width` с единицей `vw`. Значение `80vw` ограничит максимальную ширину элемента 80% ширины viewport.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку