Медиа-запросы: max-width и min-width: Тренажер CSS

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

Эта серия заданий поможет вам попрактиковаться в использовании медиа-запросов CSS с условиями `max-width` и `min-width`. Вы научитесь применять разные стили к элементам в зависимости от ширины области просмотра (viewport). Задания построены от простого к сложному: начиная с базового применения одного условия и заканчивая комбинацией условий для создания адаптивных макетов. Вам нужно будет заполнить пропущенные части CSS кода, чтобы стили корректно применялись при изменении ширины экрана (в данном случае, iframe).

Список тем

Базовый max-width

Измените цвет фона блока на 'lightcoral', когда ширина области просмотра становится 350 пикселей или меньше. Начальный цвет фона - 'lightblue'. Вам нужно правильно указать директиву медиа-запроса и условие для максимальной ширины.

CSS

.box {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
  border: 1px solid black;
  min-height: 50px; /* Для наглядности */
}

input1 screen and (input2: 350px) {
  .box {
    background-color: lightcoral; /* Не изменять */
  }
}

                     .box {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
  border: 1px solid black;
  min-height: 50px; /* Для наглядности */
}

input1 screen and (input2: 350px) {
  .box {
    background-color: lightcoral; /* Не изменять */
  }
}

HTML

<div class="box">
  Измените размер окна (iframe), чтобы увидеть эффект.
</div>

Используйте директиву `@media` для начала медиа-запроса. Внутри круглых скобок укажите условие `max-width` со значением `350px`. Не забудьте указать тип устройства `screen` и соединительное слово `and`.

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

Результат

Сообщения

Выполнить

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

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

Базовый min-width

Увеличьте размер шрифта текста в блоке до '20px', когда ширина области просмотра становится 300 пикселей или больше. Начальный размер шрифта - '16px'. Вам нужно правильно указать условие для минимальной ширины и селектор для элемента внутри медиа-запроса.

CSS

.content-area {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
  font-size: 16px; /* Не изменять */
  border: 1px solid black;
  min-height: 50px;
}

@media screen and (input1: 300px) {
  input2 {
    font-size: 20px; /* Не изменять */
  }
}

                     .content-area {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
  font-size: 16px; /* Не изменять */
  border: 1px solid black;
  min-height: 50px;
}

@media screen and (input1: 300px) {
  input2 {
    font-size: 20px; /* Не изменять */
  }
}

HTML

<div class="content-area">
  Размер шрифта изменится на более широких экранах (iframe).
</div>

Медиа-запрос уже начат с `@media screen and (...)`. Внутри круглых скобок используйте условие `min-width` со значением `300px`. Внутри фигурных скобок медиа-запроса укажите селектор `.content-area`, к которому применяются стили.

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

Результат

Сообщения

Выполнить

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

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

Диапазон ширины: min-width и max-width

Сделайте так, чтобы элементы внутри контейнера `.item-container` располагались горизонтально (`display: flex`) только тогда, когда ширина области просмотра находится в диапазоне от 280px до 370px включительно. Вне этого диапазона они должны располагаться вертикально (по умолчанию). Вам нужно добавить второе условие и соединительное слово `and`.

CSS

.item-container {
  border: 1px dashed gray;
  padding: 10px;
}
.item {
  background-color: #eee;
  padding: 15px;
  margin-bottom: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

/* Стили по умолчанию - элементы вертикально */

/* Стили для диапазона ширины */
@media screen and (min-width: 280px) input1 (input2: 370px) {
  .item-container {
    display: flex;
    justify-content: space-between;
  }
  .item {
    margin-bottom: 0;
    width: 48%; /* Не изменять */
  }
}

                     .item-container {
  border: 1px dashed gray;
  padding: 10px;
}
.item {
  background-color: #eee;
  padding: 15px;
  margin-bottom: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

/* Стили по умолчанию - элементы вертикально */

/* Стили для диапазона ширины */
@media screen and (min-width: 280px) input1 (input2: 370px) {
  .item-container {
    display: flex;
    justify-content: space-between;
  }
  .item {
    margin-bottom: 0;
    width: 48%; /* Не изменять */
  }
}

HTML

<div class="item-container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
</div>

Используйте ключевое слово `and` для объединения двух условий в одном медиа-запросе. Первое условие `min-width: 280px` уже задано. Добавьте второе условие `max-width: 370px` после `and`.

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

Результат

Сообщения

Выполнить

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

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

Несколько изменений в одном max-width

Для карточки `.card` примените несколько изменений, когда ширина экрана меньше или равна 320px: измените внутренний отступ (`padding`) на '10px', цвет рамки (`border-color`) на 'green' и цвет фона (`background-color`) на '#e0ffe0'. Вам нужно указать директиву медиа-запроса, условие `max-width` и одно из изменяемых свойств.

CSS

.card {
  border: 3px solid blue;
  padding: 20px;
  background-color: #f0f0f0;
  text-align: center;
}
.card img {
  max-width: 80px; /* Не изменять */
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

input1 screen and (input2: 320px) {
  .card {
    input3: 10px; /* Не изменять */
    border-color: green; /* Не изменять */
    background-color: #e0ffe0; /* Не изменять */
  }
}

                     .card {
  border: 3px solid blue;
  padding: 20px;
  background-color: #f0f0f0;
  text-align: center;
}
.card img {
  max-width: 80px; /* Не изменять */
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

input1 screen and (input2: 320px) {
  .card {
    input3: 10px; /* Не изменять */
    border-color: green; /* Не изменять */
    background-color: #e0ffe0; /* Не изменять */
  }
}

HTML

<div class="card">
  <img src="https://naytikurs.ru/img/2.png" alt="Image">
  <p>Карточка с контентом.</p>
</div>

Начните с директивы `@media`, укажите тип `screen` и условие `max-width: 320px`. Внутри блока стилей для `.card` одно из свойств заменено на `input3`. Вам нужно указать имя этого свойства (`padding`).

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

Результат

Сообщения

Выполнить

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

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

Переопределение стилей с min-width

В этом задании показано, как медиа-запросы могут переопределять стили. По умолчанию текст черный. При ширине от 250px он становится синим. Ваша задача — сделать так, чтобы при ширине от 340px текст становился красным, переопределяя синий цвет. Вам нужно указать условие `min-width` во втором медиа-запросе и свойство `color`.

CSS

.message {
  color: black; /* Не изменять */
  font-size: 18px;
  padding: 15px;
  border: 1px solid #ccc;
  text-align: center;
  min-height: 50px;
}

/* Первый уровень изменения */
@media screen and (min-width: 250px) {
  .message {
    color: blue; /* Не изменять */
  }
}

/* Второй уровень изменения (переопределение) */
@media screen and (input1: 340px) {
  .message {
    input2: red; /* Не изменять */
  }
}

                     .message {
  color: black; /* Не изменять */
  font-size: 18px;
  padding: 15px;
  border: 1px solid #ccc;
  text-align: center;
  min-height: 50px;
}

/* Первый уровень изменения */
@media screen and (min-width: 250px) {
  .message {
    color: blue; /* Не изменять */
  }
}

/* Второй уровень изменения (переопределение) */
@media screen and (input1: 340px) {
  .message {
    input2: red; /* Не изменять */
  }
}

HTML

<p class="message">Цвет этого текста меняется.</p>

Во втором медиа-запросе используйте условие `min-width` со значением `340px`, чтобы стили применялись для экранов шире этого значения. Внутри блока стилей для `.message` укажите свойство `color`, которому присваивается значение `red`.

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

Результат

Сообщения

Выполнить

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

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

Скрытие элемента с max-width

Скройте изображение с классом `.optional-image`, когда ширина области просмотра становится 300 пикселей или меньше. Используйте свойство `display`. Вам нужно указать директиву `@media`, условие `max-width` и значение для свойства `display`.

CSS

.container {
  padding: 10px;
  border: 1px solid lightgray;
}
.optional-image {
  display: block; /* По умолчанию видимо */
  margin: 10px auto;
  max-width: 100px; /* Не изменять */
  height: auto;
}

input1 screen and (input2: 300px) {
  .optional-image {
    display: input3;
  }
}

                     .container {
  padding: 10px;
  border: 1px solid lightgray;
}
.optional-image {
  display: block; /* По умолчанию видимо */
  margin: 10px auto;
  max-width: 100px; /* Не изменять */
  height: auto;
}

input1 screen and (input2: 300px) {
  .optional-image {
    display: input3;
  }
}

HTML

<div class="container">
  <p>Этот текст виден всегда.</p>
  <img src="https://naytikurs.ru/img/4.png" alt="Optional Image" class="optional-image">
  <p>Изображение выше должно исчезать на узких экранах.</p>
</div>

Используйте директиву `@media` с условием `max-width: 300px`. Чтобы скрыть элемент, установите его свойство `display` в значение `none`.

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

Результат

Сообщения

Выполнить

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

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

Изменение макета колонок с min-width

Имеется две колонки `.column`. По умолчанию они занимают всю ширину и идут друг под другом. Сделайте так, чтобы при ширине экрана 320 пикселей и больше, они располагались рядом, каждая занимая примерно половину ширины контейнера. Для этого нужно изменить их свойство `display` и `width` внутри медиа-запроса.

CSS

.row {
  border: 1px solid blue;
  padding: 5px;
  /* Используем text-align: center для простого центрирования inline-block */
  text-align: center; 
}
.column {
  border: 1px solid green;
  padding: 10px;
  margin: 5px 0; /* Отступы сверху/снизу по умолчанию */
  background-color: #f9f9f9;
  /* По умолчанию колонки занимают всю ширину */
  display: block;
  width: auto; /* или width: 100% */
  text-align: left; /* Сброс центрирования для текста внутри колонки */
}

@media screen and (input1: 320px) {
  .column {
    input2: inline-block; /* Не изменять */
    input3: 48%; /* Не изменять */
    margin: 5px 1%; /* Добавим небольшие боковые отступы */
    vertical-align: top; /* Выравнивание по верху */
  }
}

                     .row {
  border: 1px solid blue;
  padding: 5px;
  /* Используем text-align: center для простого центрирования inline-block */
  text-align: center; 
}
.column {
  border: 1px solid green;
  padding: 10px;
  margin: 5px 0; /* Отступы сверху/снизу по умолчанию */
  background-color: #f9f9f9;
  /* По умолчанию колонки занимают всю ширину */
  display: block;
  width: auto; /* или width: 100% */
  text-align: left; /* Сброс центрирования для текста внутри колонки */
}

@media screen and (input1: 320px) {
  .column {
    input2: inline-block; /* Не изменять */
    input3: 48%; /* Не изменять */
    margin: 5px 1%; /* Добавим небольшие боковые отступы */
    vertical-align: top; /* Выравнивание по верху */
  }
}

HTML

<div class="row">
  <div class="column">Колонка 1</div>
  <div class="column">Колонка 2</div>
</div>

Используйте медиа-запрос с условием `min-width: 320px`. Внутри него для селектора `.column` установите `display: inline-block` (или `flex` для родителя `.row`, но здесь проще `inline-block`) и `width` примерно 48-49% (чтобы учесть возможные отступы или границы). Пропущено условие `min-width`, свойство `display` и свойство `width`.

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

Результат

Сообщения

Выполнить

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

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