Медиа-запросы: типы устройств и медиа-функции: Тренажер CSS

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

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

Список тем

Адаптация фона для маленьких экранов

Ваша задача — изменить цвет фона блока `.content-box` на светло-серый (`#f0f0f0`), но только если ширина области просмотра *не превышает* 600px. Используйте медиа-запрос, чтобы применить стиль для экранов.

CSS

.content-box {
  padding: 20px;
  background-color: #lightblue;
  border: 1px solid #ccc;
}

/* Допишите медиа-запрос ниже */
input1 input2 (input3: 600px) {
  .content-box {
    background-color: #f0f0f0; /* Не изменяйте это значение */
  }
}

                     .content-box {
  padding: 20px;
  background-color: #lightblue;
  border: 1px solid #ccc;
}

/* Допишите медиа-запрос ниже */
input1 input2 (input3: 600px) {
  .content-box {
    background-color: #f0f0f0; /* Не изменяйте это значение */
  }
}

HTML

<div class="content-box">
  <p>Этот блок изменит фон на маленьких экранах.</p>
</div>

Используйте правило `@media`, укажите тип устройства `screen` и добавьте условие с медиа-функцией `max-width`, установив её значение в 600px. Внутри медиа-запроса определите стиль для селектора `.content-box`, изменив его `background-color`.

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

Результат

Сообщения

Выполнить

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

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

Увеличение шрифта для широких экранов

Сделайте так, чтобы текст внутри элемента с классом `.resizable-text` становился крупнее (размер шрифта 20px), когда ширина области просмотра *больше или равна* 300px. Примените это правило только для экранов.

CSS

.resizable-text {
  font-size: 16px; /* Не изменяйте это значение */
  color: #333;
}

input1 (input2: 300px) {
  .resizable-text {
    font-size: 20px; /* Не изменяйте это значение */
  }
}

                     .resizable-text {
  font-size: 16px; /* Не изменяйте это значение */
  color: #333;
}

input1 (input2: 300px) {
  .resizable-text {
    font-size: 20px; /* Не изменяйте это значение */
  }
}

HTML

<p class="resizable-text">Размер этого текста зависит от ширины экрана.</p>

Создайте медиа-запрос с помощью `@media screen`. Добавьте условие, используя медиа-функцию `min-width` со значением 300px. Внутри этого запроса задайте для селектора `.resizable-text` свойство `font-size` со значением 20px.

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

Результат

Сообщения

Выполнить

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

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

Стилизация для диапазона ширин экрана

Примените специальный стиль к элементу `.highlight-box`: добавьте ему зеленую рамку (`border: 2px solid green;`) только тогда, когда ширина области просмотра находится в диапазоне *от 250px до 350px включительно*. Убедитесь, что стили применяются только на экранах.

CSS

.highlight-box {
  padding: 15px;
  background-color: #eee;
  border: 2px solid transparent; /* Не изменяйте это значение */
  text-align: center;
}

@media screen input1 (min-width: 250px) input2 (input3: 350px) {
  .highlight-box {
    border: 2px solid green; /* Не изменяйте это значение */
  }
}

                     .highlight-box {
  padding: 15px;
  background-color: #eee;
  border: 2px solid transparent; /* Не изменяйте это значение */
  text-align: center;
}

@media screen input1 (min-width: 250px) input2 (input3: 350px) {
  .highlight-box {
    border: 2px solid green; /* Не изменяйте это значение */
  }
}

HTML

<div class="highlight-box">
  Этот блок выделяется в определенном диапазоне ширин.
</div>

Используйте медиа-запрос `@media screen`. Чтобы задать диапазон, объедините две медиа-функции: `min-width` со значением 250px и `max-width` со значением 350px. Соедините их с помощью логического оператора `and`. Внутри запроса добавьте стиль для `.highlight-box`.

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

Результат

Сообщения

Выполнить

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

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

Изменение макета при портретной ориентации

Сделайте так, чтобы элементы списка (`<li>`) внутри контейнера `.list-container` отображались как блочные элементы (`display: block;`) и имели отступ снизу (`margin-bottom: 10px;`), но только когда устройство находится в *портретной ориентации*. По умолчанию они строчно-блочные.

CSS

.list-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-container li {
  display: inline-block; /* Не изменяйте это значение */
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #e0e0e0;
}

@media (input1: input2) {
  .list-container li {
    display: block; /* Не изменяйте это значение */
    margin-bottom: 10px; /* Не изменяйте это значение */
    margin-right: 0;
  }
}

                     .list-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-container li {
  display: inline-block; /* Не изменяйте это значение */
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #e0e0e0;
}

@media (input1: input2) {
  .list-container li {
    display: block; /* Не изменяйте это значение */
    margin-bottom: 10px; /* Не изменяйте это значение */
    margin-right: 0;
  }
}

HTML

<div class="list-container">
  <ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
  </ul>
</div>

Используйте медиа-запрос, указав медиа-функцию `orientation` со значением `portrait`. Внутри запроса задайте для селектора `.list-container li` свойства `display: block;` и `margin-bottom: 10px;`.

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

Результат

Сообщения

Выполнить

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

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

Стили для печати: скрытие изображения

Необходимо скрыть изображение с логотипом (элемент с классом `.logo-image`) при печати документа. Используйте соответствующий медиа-тип.

CSS

.logo-image {
  display: block; /* Не изменяйте это значение */
  width: 100px;
  margin-bottom: 15px;
}

.text-content {
  color: #333;
}

input1 {
  .logo-image {
    input2: none; /* Не изменяйте это значение */
  }
}

                     .logo-image {
  display: block; /* Не изменяйте это значение */
  width: 100px;
  margin-bottom: 15px;
}

.text-content {
  color: #333;
}

input1 {
  .logo-image {
    input2: none; /* Не изменяйте это значение */
  }
}

HTML

<div>
  <img src="https://naytikurs.ru/img/1.png" alt="Логотип" class="logo-image">
  <p class="text-content">Этот текст будет виден при печати, а логотип — нет.</p>
</div>

Создайте медиа-запрос, используя медиа-тип `print`. Внутри этого запроса для селектора `.logo-image` установите свойство `display` в значение `none`, чтобы скрыть элемент.

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

Результат

Сообщения

Выполнить

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

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

Адаптация для устройств с возможностью наведения

Добавьте эффект при наведении курсора мыши на кнопку `.action-button`: измените её цвет фона на тёмно-синий (`#0056b3`). Этот эффект должен применяться *только* на устройствах, где основное устройство ввода поддерживает наведение (например, мышь).

CSS

.action-button {
  padding: 10px 15px;
  background-color: #007bff; /* Не изменяйте это значение */
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Применяем стиль :hover только если устройство поддерживает наведение */
@media (input1: input2) {
  .action-buttoninput3 {
    background-color: #0056b3; /* Не изменяйте это значение */
  }
}

                     .action-button {
  padding: 10px 15px;
  background-color: #007bff; /* Не изменяйте это значение */
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Применяем стиль :hover только если устройство поддерживает наведение */
@media (input1: input2) {
  .action-buttoninput3 {
    background-color: #0056b3; /* Не изменяйте это значение */
  }
}

HTML

<button class="action-button">Наведи на меня</button>

Используйте медиа-запрос с медиа-функцией `hover`. Установите значение этой функции в `hover`, чтобы стили применялись только на устройствах с возможностью наведения. Внутри медиа-запроса определите стиль для псевдо-класса `:hover` у элемента `.action-button`.

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

Результат

Сообщения

Выполнить

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

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

Комбинирование условий: ширина и ориентация

Измените цвет текста элемента `.info-panel` на белый (`#ffffff`) и фон на тёмно-серый (`#555555`), но только если ширина экрана *больше 300px* И устройство находится в *альбомной (landscape)* ориентации.

CSS

.info-panel {
  padding: 20px;
  border: 1px dashed #aaa;
  background-color: #f9f9f9;
  color: #333;
}

@media (min-width: 300px) input1 (input2: input3) {
  .info-panel {
    background-color: #555555; /* Не изменяйте это значение */
    color: #ffffff; /* Не изменяйте это значение */
  }
}

                     .info-panel {
  padding: 20px;
  border: 1px dashed #aaa;
  background-color: #f9f9f9;
  color: #333;
}

@media (min-width: 300px) input1 (input2: input3) {
  .info-panel {
    background-color: #555555; /* Не изменяйте это значение */
    color: #ffffff; /* Не изменяйте это значение */
  }
}

HTML

<div class="info-panel">
  Этот блок меняет стиль при ширине > 300px и альбомной ориентации.
</div>

Создайте медиа-запрос `@media`. Объедините два условия с помощью оператора `and`: медиа-функцию `min-width` со значением 300px и медиа-функцию `orientation` со значением `landscape`. Внутри запроса задайте стили для `.info-panel`.

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

Результат

Сообщения

Выполнить

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

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