@DannYLook
Программист

Как сделать правильный media запрос?

Мне нужно сделать media запрос для адаптации сайта под 1920 px экран 2910 1080.
Сейчас запрос выглядит так:

@media screen and (max-width: 1920px) {
}

И почему-то у человека с 1920 px 2910 1080 отображается некорректно, также есть другие media запросы, которые работают:

@media screen and (min-width: 1440px) {
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
}

Может, дело в них?
  • Вопрос задан
  • 264 просмотра
Решения вопроса 2
@Smirator
Приветствую.
Я использую такой формат:
/*Media*/
/* Large desktops and laptops */
@media (min-width: 1080px) and (max-width: 1200px) {
   /*стили*/
}

Кажется удобным, т.к. сразу видно в каком диапазоне работают стили.

Bootstrap, например, в документации показывает такой вариант:
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }


Авторитетным источником в данном вопросе будет: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
Ответ написан
Комментировать
Старайтесь не мешать между собой media min и max в одном диапазоне, могут быть конфликты по CSS стилям.

Я пользуюсь таким методом:
1920px и ниже – адаптив, desktop first.
2000px и больше – адаптив для широких мониторов и телевизоров.
/*   > 2000px   */
@media screen and (min-width: 2000px) {}

/*   < 1920px   */
@media screen and (max-width: 1920px) {}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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