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

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

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

Список тем

Изменение фона для портретной ориентации

Ваша задача — изменить цвет фона элемента с классом 'container' на светло-серый (#f0f0f0), когда устройство находится в портретной ориентации. Заполните пропуски в CSS коде, чтобы применить стиль только для портретного режима.

CSS

.container {
  padding: 20px;
  background-color: #ffffff; /* Белый фон по умолчанию */
  border: 1px solid #ccc;
  text-align: center;
}

input1 (input2: input3) {
  .container {
    background-color: #f0f0f0;
  }
}

                     .container {
  padding: 20px;
  background-color: #ffffff; /* Белый фон по умолчанию */
  border: 1px solid #ccc;
  text-align: center;
}

input1 (input2: input3) {
  .container {
    background-color: #f0f0f0;
  }
}

HTML

<div class="container">
  <p>Этот блок изменит фон в портретной ориентации.</p>
</div>

Используйте медиа-запрос `@media` с медиа-функцией `orientation` и значением `portrait`. Внутри медиа-запроса укажите селектор `.container` и свойство `background-color` со значением `#f0f0f0`.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание текста для альбомной ориентации

Сделайте так, чтобы текст внутри элемента с классом 'content' выравнивался по левому краю, когда устройство находится в альбомной (ландшафтной) ориентации. По умолчанию текст выровнен по центру.

CSS

.content {
  padding: 15px;
  border: 1px dashed blue;
  text-align: center; /* Центрирование по умолчанию */
}

@media (input1: input2) {
  .content {
    input3: left;
  }
}

                     .content {
  padding: 15px;
  border: 1px dashed blue;
  text-align: center; /* Центрирование по умолчанию */
}

@media (input1: input2) {
  .content {
    input3: left;
  }
}

HTML

<div class="content">
  <p>Этот текст будет выровнен по левому краю в альбомной ориентации.</p>
</div>

Необходимо создать медиа-запрос, который сработает при альбомной ориентации. Используйте медиа-функцию `orientation` со значением `landscape`. Внутри запроса измените свойство `text-align` для селектора `.content` на `left`.

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

Результат

Сообщения

Выполнить

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

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

Изменение макета Flexbox в альбомной ориентации

Используется Flexbox для расположения двух блоков (.item) внутри контейнера (.flex-container). По умолчанию они расположены в столбец. Сделайте так, чтобы в альбомной ориентации блоки располагались в строку.

CSS

.flex-container {
  display: flex;
  flex-direction: column; /* Столбец по умолчанию */
  gap: 10px;
  border: 1px solid green;
  padding: 10px;
}

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

input1 (orientation: input2) {
  .flex-container {
    input3: row;
  }
}

                     .flex-container {
  display: flex;
  flex-direction: column; /* Столбец по умолчанию */
  gap: 10px;
  border: 1px solid green;
  padding: 10px;
}

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

input1 (orientation: input2) {
  .flex-container {
    input3: row;
  }
}

HTML

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

Вам нужно использовать медиа-запрос для альбомной ориентации (`orientation: landscape`). Внутри этого запроса измените свойство `flex-direction` у селектора `.flex-container` на значение `row`.

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

Результат

Сообщения

Выполнить

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

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

Скрытие элемента в портретной ориентации

На странице есть изображение с классом 'logo'. Ваша задача — скрыть это изображение, когда устройство находится в портретной ориентации, чтобы освободить место. В альбомной ориентации изображение должно быть видно.

CSS

.logo {
  display: block; /* По умолчанию видно */
  margin: 10px auto;
  max-width: 100px;
}

p {
  text-align: center;
}

@media (input1: portrait) {
  input2 {
    input3: none;
  }
}

                     .logo {
  display: block; /* По умолчанию видно */
  margin: 10px auto;
  max-width: 100px;
}

p {
  text-align: center;
}

@media (input1: portrait) {
  input2 {
    input3: none;
  }
}

HTML

<div>
  <img src="https://naytikurs.ru/img/1.png" alt="Логотип" class="logo">
  <p>Логотип выше будет скрыт в портретной ориентации.</p>
</div>

Используйте медиа-запрос для портретной ориентации (`orientation: portrait`). Внутри запроса примените к селектору `.logo` свойство `display` со значением `none`, чтобы скрыть элемент.

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

Результат

Сообщения

Выполнить

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

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

Разные стили для портретной и альбомной ориентации

Задайте разные стили для элемента с классом 'card'. В портретной ориентации рамка должна быть сплошной (`solid`) синего цвета, а в альбомной — пунктирной (`dashed`) зеленого цвета. Заполните оба медиа-запроса.

CSS

.card {
  padding: 20px;
  margin: 10px;
  text-align: center;
  border: 2px solid black; /* Рамка по умолчанию */
}

/* Стили для портретной ориентации */
@media (orientation: input1) {
  .card {
    input2: 2px solid blue;
  }
}

/* Стили для альбомной ориентации */
@media (orientation: input3) {
  .card {
    border: 2px input4 green;
  }
}

                     .card {
  padding: 20px;
  margin: 10px;
  text-align: center;
  border: 2px solid black; /* Рамка по умолчанию */
}

/* Стили для портретной ориентации */
@media (orientation: input1) {
  .card {
    input2: 2px solid blue;
  }
}

/* Стили для альбомной ориентации */
@media (orientation: input3) {
  .card {
    border: 2px input4 green;
  }
}

HTML

<div class="card">
  <p>Стиль рамки этого блока зависит от ориентации устройства.</p>
</div>

Вам понадобятся два медиа-запроса: один для `orientation: portrait` и другой для `orientation: landscape`. В первом задайте `border: 2px solid blue;` для `.card`, а во втором — `border: 2px dashed green;`.

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

Результат

Сообщения

Выполнить

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

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

Изменение изображения в зависимости от ориентации

На странице есть два изображения с классами 'img-portrait' и 'img-landscape'. По умолчанию видно только 'img-portrait'. Сделайте так, чтобы в портретной ориентации было видно изображение 'img-portrait', а в альбомной — 'img-landscape'.

CSS

img {
  max-width: 150px;
  height: auto;
  display: block; /* Базовый стиль */
  margin: 10px auto;
}

.img-landscape {
  display: none; /* Скрыто по умолчанию */
}

/* Портретная ориентация (по умолчанию уже настроено, но можно явно указать) */
@media (orientation: portrait) {
  .img-portrait {
    display: block;
  }
  .img-landscape {
    input1: none;
  }
}

/* Альбомная ориентация */
@media (input2: input3) {
  .img-portrait {
    display: input4;
  }
  .img-landscape {
    display: block;
  }
}

                     img {
  max-width: 150px;
  height: auto;
  display: block; /* Базовый стиль */
  margin: 10px auto;
}

.img-landscape {
  display: none; /* Скрыто по умолчанию */
}

/* Портретная ориентация (по умолчанию уже настроено, но можно явно указать) */
@media (orientation: portrait) {
  .img-portrait {
    display: block;
  }
  .img-landscape {
    input1: none;
  }
}

/* Альбомная ориентация */
@media (input2: input3) {
  .img-portrait {
    display: input4;
  }
  .img-landscape {
    display: block;
  }
}

HTML

<div>
  <img src="https://naytikurs.ru/img/4.png" alt="Портрет" class="img-portrait">
  <img src="https://naytikurs.ru/img/5.png" alt="Ландшафт" class="img-landscape">
  <p>Изображение меняется в зависимости от ориентации.</p>
</div>

Используйте два медиа-запроса. В запросе для `orientation: portrait` убедитесь, что `.img-portrait` имеет `display: block;` (или `inline-block`), а `.img-landscape` имеет `display: none;`. В запросе для `orientation: landscape` сделайте наоборот: скройте `.img-portrait` (`display: none;`) и покажите `.img-landscape` (`display: block;` или `inline-block`).

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

Результат

Сообщения

Выполнить

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

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

Комбинация ориентации и ширины экрана

Измените стиль заголовка h2. Он должен становиться красным (#ff0000) только тогда, когда устройство находится в альбомной ориентации И при этом его ширина не менее 300 пикселей.

CSS

h2 {
  text-align: center;
  color: #000000; /* Черный по умолчанию */
}

@media (input1: landscape) input2 (input3: 300px) {
  h2 {
    input4: #ff0000;
  }
}

                     h2 {
  text-align: center;
  color: #000000; /* Черный по умолчанию */
}

@media (input1: landscape) input2 (input3: 300px) {
  h2 {
    input4: #ff0000;
  }
}

HTML

<div>
  <h2>Этот заголовок станет красным в альбомной ориентации на экранах шире 300px</h2>
</div>

Используйте медиа-запрос, комбинируя две медиа-функции с помощью ключевого слова `and`. Вам нужны `orientation: landscape` и `min-width: 300px`. Внутри запроса примените стиль `color: #ff0000;` к селектору `h2`.

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

Результат

Сообщения

Выполнить

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

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