Тестирование адаптивности: Тренажер CSS

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

Этот набор заданий посвящен проверке и отладке адаптивного дизайна веб-страниц. Адаптивность — это способность сайта корректно отображаться на устройствах с различными размерами экранов, от больших десктопов до маленьких смартфонов. В этих упражнениях вы будете работать с медиа-запросами (`@media`), чтобы изменять стили элементов в зависимости от характеристик устройства (например, ширины экрана). Вам предстоит заполнять пропуски в CSS-коде, чтобы добиться нужного поведения макета на разных разрешениях. Задания помогут вам понять, как использовать медиа-запросы для создания гибких и удобных интерфейсов. Обратите внимание, что результат будет отображаться в окне с максимальной шириной 372px.

Список тем

Простой медиа-запрос

Начнем с основ. У вас есть блок с текстом. Задача: изменить его фоновый цвет на светло-серый (`#f0f0f0`), когда ширина области просмотра становится 350 пикселей или меньше. Вам нужно правильно указать условие в медиа-запросе.

CSS

.content-block {
  padding: 20px;
  background-color: #lightblue;
  text-align: center;
}

/* Примените стиль ниже, если ширина экрана 350px или меньше */
@media (input1: 350px) {
  .content-block {
    background-color: #f0f0f0;
  }
}

                     .content-block {
  padding: 20px;
  background-color: #lightblue;
  text-align: center;
}

/* Примените стиль ниже, если ширина экрана 350px или меньше */
@media (input1: 350px) {
  .content-block {
    background-color: #f0f0f0;
  }
}

HTML

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

Используйте правило `@media` с условием `max-width`, чтобы применить стили для экранов, ширина которых не превышает указанное значение. Вам нужно вставить `max-width` в `input1`.

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

Результат

Сообщения

Выполнить

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

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

Изменение макета Flexbox

У вас есть контейнер с двумя блоками, расположенными в ряд с помощью Flexbox. Задача: сделать так, чтобы на экранах шириной 300 пикселей или меньше блоки располагались друг под другом (в столбец).

CSS

.flex-container {
  display: flex;
  padding: 10px;
  background-color: #eee;
}

.flex-item {
  flex: 1;
  margin: 5px;
  padding: 15px;
  background-color: #bbf;
  text-align: center;
}

@media (max-width: 300px) {
  .flex-container {
    input1: column;
  }
}

                     .flex-container {
  display: flex;
  padding: 10px;
  background-color: #eee;
}

.flex-item {
  flex: 1;
  margin: 5px;
  padding: 15px;
  background-color: #bbf;
  text-align: center;
}

@media (max-width: 300px) {
  .flex-container {
    input1: column;
  }
}

HTML

<div class="flex-container">
  <div class="flex-item">Блок 1</div>
  <div class="flex-item">Блок 2</div>
</div>

Внутри медиа-запроса `@media (max-width: 300px)` вам нужно изменить свойство `flex-direction` для класса `.flex-container`. Установите значение `column`, чтобы элементы выстроились в столбец. Вставьте `flex-direction` в `input1`.

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

Результат

Сообщения

Выполнить

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

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

Скрытие элемента на маленьких экранах

На странице есть основной контент и дополнительная боковая панель (sidebar). Задача: скрыть боковую панель, когда ширина экрана становится 280 пикселей или меньше, чтобы освободить место для основного контента.

CSS

.container {
  display: flex;
}

.main-content {
  flex-grow: 1;
  padding: 15px;
  background-color: #fff;
}

.sidebar {
  width: 100px;
  padding: 15px;
  background-color: #ddd;
  flex-shrink: 0;
}

@media (max-width: 280px) {
  input1 {
    display: none;
  }
}

                     .container {
  display: flex;
}

.main-content {
  flex-grow: 1;
  padding: 15px;
  background-color: #fff;
}

.sidebar {
  width: 100px;
  padding: 15px;
  background-color: #ddd;
  flex-shrink: 0;
}

@media (max-width: 280px) {
  input1 {
    display: none;
  }
}

HTML

<div class="container">
  <div class="main-content">
    <p>Основной контент...</p>
  </div>
  <div class="sidebar">
    Боковая панель
  </div>
</div>

Вам нужно использовать медиа-запрос с `max-width: 280px`. Внутри него выберите элемент с классом `.sidebar` и примените к нему свойство `display` со значением `none`. Вставьте селектор `.sidebar` в `input1`.

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

Результат

Сообщения

Выполнить

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

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

Комбинированный медиа-запрос (диапазон)

Есть блок с текстом. Задача: применить к нему рамку (`border: 2px solid green;`) только тогда, когда ширина экрана находится в диапазоне от 300 до 370 пикселей включительно.

CSS

.special-block {
  padding: 20px;
  margin-top: 10px;
  background-color: #e0e0ff;
  text-align: center;
}

/* Применить рамку только для ширины от 300px до 370px */
@media (input1: 300px) and (input2: 370px) {
  .special-block {
    border: 2px solid green;
  }
}

                     .special-block {
  padding: 20px;
  margin-top: 10px;
  background-color: #e0e0ff;
  text-align: center;
}

/* Применить рамку только для ширины от 300px до 370px */
@media (input1: 300px) and (input2: 370px) {
  .special-block {
    border: 2px solid green;
  }
}

HTML

<div class="special-block">
  <p>Этот блок получает рамку в определенном диапазоне ширины.</p>
</div>

Используйте медиа-запрос с двумя условиями, объединенными оператором `and`. Первое условие должно проверять минимальную ширину (`min-width`), второе — максимальную (`max-width`). Вставьте `min-width` в `input1` и `max-width` в `input2`.

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

Результат

Сообщения

Выполнить

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

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

Условие по ориентации экрана

Имеется изображение. Задача: изменить его максимальную ширину на `100%`, а также добавить отступ снизу (`margin-bottom: 15px;`), когда экран устройства находится в альбомной (landscape) ориентации И при этом его максимальная ширина не превышает 370px.

CSS

.responsive-image {
  display: block;
  max-width: 150px; /* Изначальная ширина */
  height: auto;
  margin: 10px auto;
}

/* Стили для альбомной ориентации на небольших экранах */
@media (max-width: 370px) input1 (input2: landscape) {
  .responsive-image {
    max-width: 100%;
    margin-bottom: 15px;
  }
}

                     .responsive-image {
  display: block;
  max-width: 150px; /* Изначальная ширина */
  height: auto;
  margin: 10px auto;
}

/* Стили для альбомной ориентации на небольших экранах */
@media (max-width: 370px) input1 (input2: landscape) {
  .responsive-image {
    max-width: 100%;
    margin-bottom: 15px;
  }
}

HTML

<div>
  <p>Изображение ниже адаптируется к альбомной ориентации:</p>
  <img src="https://naytikurs.ru/img/7.png" alt="Пример изображения" class="responsive-image">
</div>

Вам нужно добавить второе условие к существующему `max-width` через оператор `and`. Это условие должно проверять ориентацию экрана с помощью `orientation: landscape`. Вставьте `and` в `input1` и `orientation` в `input2`.

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

Результат

Сообщения

Выполнить

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

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

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

Задача: изменить выравнивание текста в параграфе на центральное (`text-align: center;`), но только для устройств с экраном (`screen`) и при условии, что максимальная ширина экрана 320 пикселей.

CSS

.text-block {
  padding: 15px;
  text-align: left;
  background-color: #f9f9f9;
}

/* Центрировать текст только на экранах до 320px */
@media input1 input2 (max-width: 320px) {
  .text-block {
    text-align: center;
  }
}

                     .text-block {
  padding: 15px;
  text-align: left;
  background-color: #f9f9f9;
}

/* Центрировать текст только на экранах до 320px */
@media input1 input2 (max-width: 320px) {
  .text-block {
    text-align: center;
  }
}

HTML

<div class="text-block">
  <p>Этот текст будет центрирован только на маленьких экранах.</p>
</div>

Медиа-запросы могут включать тип устройства. Самый распространенный тип — `screen`. Вам нужно указать `screen` перед условием ширины, используя оператор `and`. Вставьте `screen` в `input1` и `and` в `input2`.

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

Результат

Сообщения

Выполнить

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

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

Несколько изменений в одном медиа-запросе

У вас есть карточка товара с изображением и описанием. Задача: на экранах шириной 340px или меньше сделать так, чтобы изображение и текст располагались друг под другом (изменить `flex-direction`), а также увеличить жирность текста описания (`font-weight: bold;`).

CSS

.product-card {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  flex-shrink: 0;
}

.product-description {
  flex-grow: 1;
}

@media (max-width: 340px) {
  .product-card {
    input1: column;
    align-items: flex-start;
  }
  .product-image {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .product-description {
    input2: bold;
  }
}

                     .product-card {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  flex-shrink: 0;
}

.product-description {
  flex-grow: 1;
}

@media (max-width: 340px) {
  .product-card {
    input1: column;
    align-items: flex-start;
  }
  .product-image {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .product-description {
    input2: bold;
  }
}

HTML

<div class="product-card">
  <img src="https://naytikurs.ru/img/9.png" alt="Товар" class="product-image">
  <div class="product-description">
    <p>Описание товара, которое должно стать жирным на маленьких экранах.</p>
  </div>
</div>

Внутри медиа-запроса `@media (max-width: 340px)` вам нужно изменить два свойства: `flex-direction` для контейнера `.product-card` и `font-weight` для описания `.product-description`. Вставьте `flex-direction` в `input1` и `font-weight` в `input2`.

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

Результат

Сообщения

Выполнить

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

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