Mobile-first подход: Тренажер CSS

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

Этот набор упражнений посвящен подходу \"Mobile-first\" в CSS. Вы будете работать с готовым HTML и CSS кодом, где некоторые части пропущены. Ваша задача — заполнить эти пропуски, чтобы стили корректно применялись сначала для мобильных устройств, а затем адаптировались для больших экранов с использованием медиа-запросов. Упражнения помогут вам понять, как структурировать CSS, начиная с базовых стилей для маленьких экранов и постепенно добавляя или изменяя их для планшетов и десктопов. Все изменения вы сможете увидеть в окне предпросмотра.

Список тем

Базовые стили для мобильных

Начнем с основ Mobile-first. У нас есть простой контейнер с текстом. Задача — применить основные стили (отступы и выравнивание текста) непосредственно к элементу так, чтобы они работали на всех устройствах, начиная с самых маленьких. Эти стили будут нашей основой.

CSS

.container {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  /* Добавьте внутренние отступы 15px */
  input1: 15px;
  /* Выровняйте текст по центру */
  input2: center;
}

                     .container {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  /* Добавьте внутренние отступы 15px */
  input1: 15px;
  /* Выровняйте текст по центру */
  input2: center;
}

HTML

<div class="container">
  <p>Это базовый контент, который должен хорошо выглядеть на мобильных устройствах.</p>
</div>

В подходе Mobile-first стили по умолчанию пишутся для мобильных устройств (самых маленьких экранов) вне всяких медиа-запросов. Вам нужно добавить свойства `padding` для внутренних отступов и `text-align` для выравнивания текста внутри селектора `.container`.

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

Результат

Сообщения

Выполнить

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

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

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

Теперь добавим адаптивности. Используя подход Mobile-first, нам нужно изменить цвет фона контейнера для экранов шире 600px. Дополните CSS код, создав медиа-запрос, который сработает при достижении нужной ширины.

CSS

.container {
  padding: 15px;
  text-align: center;
  background-color: #e0f7fa; /* Голубой фон для мобильных */
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
}

/* Медиа-запрос для экранов шире 600px */
input1 (input2: 600px) {
  .container {
    background-color: #fff9c4; /* Желтый фон для больших экранов */
  }
}

                     .container {
  padding: 15px;
  text-align: center;
  background-color: #e0f7fa; /* Голубой фон для мобильных */
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
}

/* Медиа-запрос для экранов шире 600px */
input1 (input2: 600px) {
  .container {
    background-color: #fff9c4; /* Желтый фон для больших экранов */
  }
}

HTML

<div class="container">
  <p>Фон этого блока должен стать желтым на экранах шире 600px.</p>
</div>

Чтобы применить стили только для экранов, ширина которых больше или равна определенному значению, используется медиа-запрос с условием `min-width`. Внутри `@media` правила укажите селектор `.container` и измените его `background-color`.

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

Результат

Сообщения

Выполнить

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

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

Изменение макета колонок

У нас есть две колонки, которые на мобильных устройствах должны располагаться друг под другом. На экранах шире 700px они должны встать в один ряд. Используйте Flexbox для управления макетом и примените нужные стили внутри медиа-запроса.

CSS

.row {
  border: 1px solid #ccc;
  padding: 10px;
  /* На мобильных используем flex, колонки друг под другом */
  display: flex;
  input1: column;
}

.col {
  background-color: #f0f0f0;
  padding: 15px;
  margin: 5px;
  border: 1px dashed #aaa;
  text-align: center;
}

@media (min-width: 700px) {
  .row {
    /* На больших экранах колонки в ряд */
    input2: row;
  }
}

                     .row {
  border: 1px solid #ccc;
  padding: 10px;
  /* На мобильных используем flex, колонки друг под другом */
  display: flex;
  input1: column;
}

.col {
  background-color: #f0f0f0;
  padding: 15px;
  margin: 5px;
  border: 1px dashed #aaa;
  text-align: center;
}

@media (min-width: 700px) {
  .row {
    /* На больших экранах колонки в ряд */
    input2: row;
  }
}

HTML

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

Сначала задайте для родительского элемента `.row` свойство `display: flex` и `flex-direction: column` (или оставьте блочное поведение по умолчанию). Затем, внутри медиа-запроса `@media (min-width: 700px)`, измените `flex-direction` на `row`, чтобы колонки выстроились горизонтально.

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

Результат

Сообщения

Выполнить

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

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

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

Изображение должно корректно масштабироваться и не выходить за пределы своего контейнера на любых устройствах. Добавьте CSS правило, которое обеспечит адаптивность изображения.

CSS

.image-container {
  max-width: 100%; /* Контейнер ограничен текущей шириной */
  border: 2px solid #888;
  padding: 5px;
}

.responsive-img {
  display: block; /* Убирает лишний отступ под изображением */
  input1: 100%;
  input2: auto;
}

                     .image-container {
  max-width: 100%; /* Контейнер ограничен текущей шириной */
  border: 2px solid #888;
  padding: 5px;
}

.responsive-img {
  display: block; /* Убирает лишний отступ под изображением */
  input1: 100%;
  input2: auto;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/7.png" alt="Адаптивное изображение" class="responsive-img">
</div>

Чтобы изображение масштабировалось пропорционально и не превышало ширину родительского контейнера, используется свойство `max-width` со значением `100%`. Также часто добавляют `height: auto;` для сохранения пропорций.

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

Результат

Сообщения

Выполнить

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

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

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

У нас есть дополнительный блок информации (`.optional-info`), который должен быть скрыт на мобильных устройствах и появляться только на экранах шире 650px. Реализуйте это с помощью CSS.

CSS

.content {
  padding: 10px;
  border: 1px solid #ccc;
}

.optional-info {
  background-color: #e8f5e9;
  border: 1px dashed #a5d6a7;
  padding: 10px;
  margin-top: 10px;
  /* Скрыть блок по умолчанию (для мобильных) */
  input1: none;
}

@media (min-width: 650px) {
  .optional-info {
    /* Показать блок на экранах шире 650px */
    input2: block;
  }
}

                     .content {
  padding: 10px;
  border: 1px solid #ccc;
}

.optional-info {
  background-color: #e8f5e9;
  border: 1px dashed #a5d6a7;
  padding: 10px;
  margin-top: 10px;
  /* Скрыть блок по умолчанию (для мобильных) */
  input1: none;
}

@media (min-width: 650px) {
  .optional-info {
    /* Показать блок на экранах шире 650px */
    input2: block;
  }
}

HTML

<div class="content">
  <p>Основной контент, видимый всегда.</p>
  <div class="optional-info">
    Этот блок виден только на широких экранах.
  </div>
</div>

В подходе Mobile-first, сначала скройте элемент по умолчанию, используя `display: none;`. Затем, внутри медиа-запроса `@media (min-width: 650px)`, измените значение `display` на `block` (или другое подходящее, например `flex`, `grid`), чтобы элемент стал видимым.

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

Результат

Сообщения

Выполнить

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

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

Несколько точек перелома (Breakpoints)

Создайте адаптивный макет с тремя состояниями: 1 колонка на мобильных, 2 колонки на планшетах (шире 600px) и 3 колонки на десктопах (шире 900px). Используйте Grid Layout.

CSS

.grid-container {
  border: 1px solid #ccc;
  padding: 10px;
  /* По умолчанию - элементы друг под другом */
}

.item {
  background-color: #e1f5fe;
  border: 1px dashed #4fc3f7;
  padding: 20px;
  text-align: center;
  margin-bottom: 10px; /* Отступ снизу для мобильных */
}

/* Планшеты: 2 колонки */
@media (input1: 600px) {
  .grid-container {
    display: grid;
    input2: repeat(2, 1fr);
    gap: 10px; /* Промежуток между элементами */
    margin-bottom: 0;
  }
  .item {
      margin-bottom: 0;
  }
}

/* Десктопы: 3 колонки */
@media (input3: 900px) {
  .grid-container {
    input4: repeat(3, 1fr);
  }
}

                     .grid-container {
  border: 1px solid #ccc;
  padding: 10px;
  /* По умолчанию - элементы друг под другом */
}

.item {
  background-color: #e1f5fe;
  border: 1px dashed #4fc3f7;
  padding: 20px;
  text-align: center;
  margin-bottom: 10px; /* Отступ снизу для мобильных */
}

/* Планшеты: 2 колонки */
@media (input1: 600px) {
  .grid-container {
    display: grid;
    input2: repeat(2, 1fr);
    gap: 10px; /* Промежуток между элементами */
    margin-bottom: 0;
  }
  .item {
      margin-bottom: 0;
  }
}

/* Десктопы: 3 колонки */
@media (input3: 900px) {
  .grid-container {
    input4: repeat(3, 1fr);
  }
}

HTML

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

По умолчанию элементы `.item` будут идти друг за другом (как блочные). В первом медиа-запросе `@media (min-width: 600px)` примените к `.grid-container` свойство `display: grid` и `grid-template-columns: repeat(2, 1fr)` для создания двух колонок. Во втором медиа-запросе `@media (min-width: 900px)` измените `grid-template-columns` на `repeat(3, 1fr)` для трех колонок.

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

Результат

Сообщения

Выполнить

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

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

Комбинирование условий в медиа-запросе

Измените стиль текста (сделайте его курсивным) только для экранов планшетной ориентации, ширина которых находится в диапазоне от 700px до 1000px.

CSS

.text-block {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fafafa;
  font-size: 1.1em;
}

/* Применить стиль только для диапазона ширин */
@media (input1: 700px) input2 (input3: 1000px) {
  .text-block {
    input4: italic;
  }
}

                     .text-block {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fafafa;
  font-size: 1.1em;
}

/* Применить стиль только для диапазона ширин */
@media (input1: 700px) input2 (input3: 1000px) {
  .text-block {
    input4: italic;
  }
}

HTML

<div class="text-block">
  <p>Этот текст должен стать курсивным только на экранах шириной от 700px до 1000px.</p>
</div>

Для задания диапазона ширины в медиа-запросе используйте комбинацию `min-width` и `max-width`, соединив их логическим оператором `and`. Например: `@media (min-width: 700px) and (max-width: 1000px) { ... }`. Внутри примените `font-style: italic;` к нужному элементу.

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

Результат

Сообщения

Выполнить

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

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