@Waflya15030

Объясните пожалуйста принцип медиа запросов?

Не понимаю как делать медиа запросы совсем. Смотрела очень много всяких видео, читала, но как-то с трудом вообще доходит. Может кто-то объяснить максимально просто и доступно понятно?
Заранее спасибо
  • Вопрос задан
  • 98 просмотров
Решения вопроса 2
YuriyVorobyov1333
@YuriyVorobyov1333
Software Developer (Node.js/Angular)
Все просто, изначально вы пишите свои стили под какое-то конкретное устройство и расширение, а потом захотели, чтобы ваш сайт корректно отображался на других устройствах и расширениях, вот тут и применяете медиа запросы, переопределяя ваши стили, например, вы пишите:
@media (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
}

И теперь стили, определенные внутри {}, будут работать только для устройств, ширина которых в диапазоне от 600px до 800px включительно.
Понятное дело, что медиа запросы не ограничиваются этими свойствами, а их там вагон и маленькая тележка, но для понимания, что это такое и зачем, достаточно.
Самая толковая, на мой взгляд, "документация" по медиа запросам тут и тут, а тут и тут представлены достаточно хорошие примеры.
Ответ написан
ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer
Медиа запросы - это способ прописать стили с привязкой к:
1) Размеру вьюпорта
2) Ориентации
3) Устройству
4) возможне еще чему-то, но не суть
то есть задать некоторые дополнительные условия в которых будут применены/переопределены специфические стили. Важно что все медиа запросы в описании стилей должны идти после основных стилей, в порядке приоритета, где самые "главные" в конце (более нижние переопределяют более верхние).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы