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

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

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

Список тем

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

Ваша первая задача - использовать правило @media для изменения цвета фона элемента `.box` на `lightcoral`, когда ширина области просмотра меньше или равна 300 пикселям. Заполните пропуск, чтобы активировать медиа-запрос.

CSS

.box {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

input1 screen and (max-width: 300px) {
  .box {
    background-color: lightcoral;
  }
}

                     .box {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

input1 screen and (max-width: 300px) {
  .box {
    background-color: lightcoral;
  }
}

HTML

<div class="box">
  Контент внутри блока
</div>

Чтобы применить стили при определенных условиях, используется правило `@media`. Добавьте ключевое слово `@media` перед условием `screen and (max-width: 300px)`.

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

Результат

Сообщения

Выполнить

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

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

Указание типа устройства

Медиа-запросы могут быть нацелены на определенные типы устройств. В этом задании нужно применить стиль (курсивный текст) к параграфу только для устройств с экраном (`screen`). Заполните пропуск, указав правильный медиа-тип.

CSS

@media input1 {
  p {
    font-style: italic;
    color: navy;
  }
}

                     @media input1 {
  p {
    font-style: italic;
    color: navy;
  }
}

HTML

<p>Этот текст должен стать курсивным на экранах.</p>

Чтобы стили применялись только к экранам (мониторы, планшеты, телефоны), используйте медиа-тип `screen` после `@media`. Также допустим тип `all`, который применяется ко всем устройствам.

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

Результат

Сообщения

Выполнить

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

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

Использование max-width

Медиа-функция `max-width` позволяет применять стили, когда ширина области просмотра *не превышает* указанное значение. Сделайте так, чтобы зеленый блок `.optional-info` скрывался (используя `display: none;`), если ширина экрана 350px или меньше. Заполните пропуск нужной медиа-функцией.

CSS

.main-content {
  background-color: #eee;
  padding: 15px;
}

.optional-info {
  background-color: lightgreen;
  padding: 10px;
  margin-top: 10px;
}

@media screen and (input1: 350px) {
  .optional-info {
    display: none;
  }
}

                     .main-content {
  background-color: #eee;
  padding: 15px;
}

.optional-info {
  background-color: lightgreen;
  padding: 10px;
  margin-top: 10px;
}

@media screen and (input1: 350px) {
  .optional-info {
    display: none;
  }
}

HTML

<div class="main-content">
  Основной контент.
</div>
<div class="optional-info">
  Эта информация должна исчезать на маленьких экранах.
</div>

Используйте медиа-функцию `max-width` для задания максимальной ширины, при которой будут применяться стили. Формат: `(max-width: 350px)`.

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

Результат

Сообщения

Выполнить

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

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

Использование min-width

Медиа-функция `min-width` применяет стили, когда ширина области просмотра *больше или равна* указанному значению. Измените размер шрифта параграфа на `20px`, если ширина экрана составляет 250px или больше. Заполните пропуск соответствующей медиа-функцией.

CSS

p {
  font-size: 16px;
  color: #333;
}

@media screen and (input1: 250px) {
  p {
    font-size: 20px; /* Не редактируется */
  }
}

                     p {
  font-size: 16px;
  color: #333;
}

@media screen and (input1: 250px) {
  p {
    font-size: 20px; /* Не редактируется */
  }
}

HTML

<p>Размер этого текста должен увеличиться на широких экранах (шире 250px).</p>

Используйте медиа-функцию `min-width` для задания минимальной ширины, начиная с которой будут применяться стили. Формат: `(min-width: 250px)`.

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

Результат

Сообщения

Выполнить

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

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

Комбинирование условий с 'and'

Часто нужно комбинировать несколько условий, например, тип устройства и ширину экрана. Используйте логический оператор `and`, чтобы применить стиль (красная пунктирная рамка) к элементу `.card` только на устройствах типа `screen` И при ширине экрана не более 320px. Заполните пропуск.

CSS

.card {
  border: 2px solid blue;
  padding: 15px;
  background-color: #f0f8ff;
}

@media screen input1 (max-width: 320px) {
  .card {
    border: 3px dashed red;
  }
}

                     .card {
  border: 2px solid blue;
  padding: 15px;
  background-color: #f0f8ff;
}

@media screen input1 (max-width: 320px) {
  .card {
    border: 3px dashed red;
  }
}

HTML

<div class="card">
  Эта карточка меняет рамку на маленьких экранах.
</div>

Для объединения нескольких условий в медиа-запросе используется ключевое слово `and`.

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

Результат

Сообщения

Выполнить

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

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

Определение ориентации устройства

Медиа-запросы могут реагировать на ориентацию устройства: портретную (`portrait`) или альбомную (`landscape`). Измените цвет фона `body` на `lightyellow`, когда устройство находится в портретной ориентации. Заполните пропуски для медиа-функции и её значения.

CSS

body {
  background-color: white;
  min-height: 200px; /* Для наглядности */
}

@media (input1: input2) {
  body {
    background-color: lightyellow;
  }
}

                     body {
  background-color: white;
  min-height: 200px; /* Для наглядности */
}

@media (input1: input2) {
  body {
    background-color: lightyellow;
  }
}

HTML

<div>Проверьте изменение фона при портретной ориентации. В iframe скорее всего будет портретная.</div>

Используйте медиа-функцию `orientation` со значением `portrait` для применения стилей в портретной ориентации. Формат: `(orientation: portrait)`.

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

Результат

Сообщения

Выполнить

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

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

Несколько диапазонов ширины

Создайте три разных стиля для блока `.widget` в зависимости от ширины экрана: по умолчанию фон `lightblue`, при ширине до 200px фон `lightcoral`, при ширине от 300px фон `lightgreen`. Вам нужно указать значения ширины в двух медиа-запросах.

CSS

.widget {
  padding: 25px;
  background-color: lightblue; /* Default */
  text-align: center;
  color: black;
  border: 1px solid #ccc;
}

/* Стиль для самых маленьких экранов */
@media (max-width: input1) {
  .widget {
    background-color: lightcoral;
  }
}

/* Стиль для широких экранов */
@media (min-width: input2) {
  .widget {
    background-color: lightgreen;
  }
}

                     .widget {
  padding: 25px;
  background-color: lightblue; /* Default */
  text-align: center;
  color: black;
  border: 1px solid #ccc;
}

/* Стиль для самых маленьких экранов */
@media (max-width: input1) {
  .widget {
    background-color: lightcoral;
  }
}

/* Стиль для широких экранов */
@media (min-width: input2) {
  .widget {
    background-color: lightgreen;
  }
}

HTML

<div class="widget">
  Цвет фона этого виджета зависит от ширины экрана.
</div>

Используйте `max-width` для стилей до определенной ширины и `min-width` для стилей от определенной ширины. Вставьте `200px` в первый медиа-запрос и `300px` во второй.

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

Результат

Сообщения

Выполнить

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

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

Объединение разных запросов через запятую (OR)

Иногда нужно применить одинаковые стили для совершенно разных условий. Например, для печати (`print`) ИЛИ для очень маленьких экранов (шириной до 150px). Используйте запятую (`,`) для объединения этих двух запросов. Сделайте текст параграфа красным и жирным при выполнении любого из этих условий.

CSS

p {
  color: black;
  font-weight: normal;
}

@media print input1 screen and (max-width: 150px) {
  p {
    color: red;
    font-weight: bold;
  }
}

                     p {
  color: black;
  font-weight: normal;
}

@media print input1 screen and (max-width: 150px) {
  p {
    color: red;
    font-weight: bold;
  }
}

HTML

<p>Этот текст станет красным и жирным при печати или на очень узких экранах (до 150px).</p>

Запятая (`,`) в медиа-запросах работает как логическое ИЛИ. Перечислите полные медиа-запросы через запятую: `@media print, screen and (max-width: 150px) { ... }`.

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

Результат

Сообщения

Выполнить

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

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

Комбинирование min-width и max-width

Часто требуется применить стили в определенном диапазоне ширины, например, между 200px и 350px. Используйте `min-width` и `max-width` вместе с оператором `and`, чтобы добавить фиолетовую рамку элементу `.content-area` только в этом диапазоне ширин. Заполните пропуски операторами `and`.

CSS

.content-area {
  padding: 20px;
  background-color: #fafafa;
  border: 1px solid lightgray;
}

@media screen input1 (min-width: 200px) input2 (max-width: 350px) {
  .content-area {
    border: 5px solid purple;
  }
}

                     .content-area {
  padding: 20px;
  background-color: #fafafa;
  border: 1px solid lightgray;
}

@media screen input1 (min-width: 200px) input2 (max-width: 350px) {
  .content-area {
    border: 5px solid purple;
  }
}

HTML

<div class="content-area">
  Эта область получает фиолетовую рамку при ширине экрана от 200px до 350px.
</div>

Чтобы задать диапазон, объедините условия `min-width` и `max-width` с помощью оператора `and`. Пример: `@media screen and (min-width: 200px) and (max-width: 350px) { ... }`.

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

Результат

Сообщения

Выполнить

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

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

Медиа-запрос для изображения

Адаптивность часто касается изображений. Сделайте так, чтобы изображение с классом `.adaptive-image` имело максимальную ширину 100% по умолчанию, но при ширине экрана от 300px и выше, его максимальная ширина становилась 250px. Заполните пропуски для медиа-функции и оператора `and`.

CSS

.adaptive-image {
  display: block; /* Чтобы margin: auto работал */
  max-width: 100%; /* По умолчанию */
  height: auto;
  margin: 10px auto;
}

@media screen input1 (input2: 300px) {
  .adaptive-image {
    max-width: 250px; /* Не редактируется */
  }
}

                     .adaptive-image {
  display: block; /* Чтобы margin: auto работал */
  max-width: 100%; /* По умолчанию */
  height: auto;
  margin: 10px auto;
}

@media screen input1 (input2: 300px) {
  .adaptive-image {
    max-width: 250px; /* Не редактируется */
  }
}

HTML

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

Используйте `min-width` для задания условия 'от 300px'. Объедините его с типом `screen` с помощью оператора `and`.

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

Результат

Сообщения

Выполнить

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

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