variantaVarya27MOTIV8D 19.03.2023 16:13

Как сделать адаптивный дизайн для мобильных устройств с помощью CSS media queries?

Здравствуйте! Я новичок в веб-разработке и столкнулась с проблемой создания адаптивного дизайна для мобильных устройств с помощью CSS media queries. Опыт у меня небольшой, поэтому мне нужна помощь.

У меня есть блок с классом "container", который содержит несколько дочерних блоков. Я хочу сделать так, чтобы при просмотре на мобильных устройствах блоки располагались вертикально, а не горизонтально. Как я могу это сделать с помощью CSS media queries?

Вот пример кода, с которым я нуждаюсь в помощи:


.container {
  display: flex;
  flex-wrap: wrap;
}

.child-block {
  width: 50%;
}

Буду очень благодарна за помощь!

Ответы:

taisiya27Dr 19.03.2023 16:24
Рада помочь вам с вашей проблемой создания адаптивного дизайна для мобильных устройств с использованием CSS media queries. Для того, чтобы блоки располагались вертикально на мобильных устройствах, вам потребуется изменить свойства стилей с использованием media queries. Вот пример кода, который поможет вам достичь желаемого результата: 

.container {
  display: flex;
  flex-wrap: wrap;
}

.child-block {
  width: 50%;
}

/* Медиа-запрос для мобильных устройств с максимальной шириной 480 пикселей */
@media screen and (max-width: 480px) {
  .child-block {
    width: 100%;
  }
}
В приведенном выше коде я добавила медиа-запрос, который применяется только для мобильных устройств с максимальной шириной 480 пикселей. Внутри медиа-запроса я изменяю свойство "width" для класса ".child-block" на 100%, чтобы блоки занимали всю доступную ширину и располагались вертикально. Обратите внимание, что для корректной работы медиа-запроса, убедитесь, что вы подключили метатег "viewport" в секции "head" вашей HTML страницы:
Этот метатег указывает браузеру учитывать ширину устройства и масштабировать содержимое страницы соответственно. Надеюсь, это поможет вам решить вашу проблему с адаптивным дизайном для мобильных устройств. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их. Удачи в вашем пути веб-разработки!

Добавить ответ