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

Question

[Даниил Секретов]

Мне нужно сделать 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) {
}

Может, дело в них?

Comments

[Ankhena]

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

Будет работать на вьюпортах меньше или равных 1920

Вам хорошо бы определиться в какую сторону вы двигаетесь от мобилок к десктопам или наоборот (mobile first или desktop first). Хотя бы для конкретного проблемного селектора. В идеале, конечно, для всех в одну, но бывают и исключения.

Answer 1

[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_...

Answer 2

[Илья Петров]

Старайтесь не мешать между собой media min и max в одном диапазоне, могут быть конфликты по CSS стилям.

Я пользуюсь таким методом:
1920px и ниже – адаптив, desktop first.
2000px и больше – адаптив для широких мониторов и телевизоров.

/*   > 2000px   */
@media screen and (min-width: 2000px) {}

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

Comments

[Ankhena]

А в оставшиеся 78 точек делай, браузер, что хочешь )))

[Илья Петров]

Ankhena, не надо брать breakpoint за золотой стандарт.
Если ширина не затрагивается запросами, значит в этом диапазоне не требуется изменений.

[Ankhena]

Илья Петров, золотой стандарт - писать все media в одном направлении.

В вашем придуманном примере получается пишем для всех, потом переопределили и вниз и вверх. В итоге "для всех" - это 78 точек. Ну и знаки < и > некорректны, исправьте, пожалуйста.

Если что, да, интервалов может быть много и да они могут быть небольшими, если это требуется для гармоничного отображения. Но, пожалуйста, для одного селектора (ну хотя бы) в одном направлении.

[Илья Петров]

Ankhena, max-width — от указанного размера и ниже, моя запись обозначает X < 1920px,
где X меньше 1920px.

Простое правило для запоминания знаков больше или меньше — представьте, что знак – это клюв птицы, и она открывает клюв в сторону большего числа.

Если мы говорим про стили, то media-запросы – это дополнительные стили к основным.
И параметр в media запросе нужен браузеру, чтобы понять, когда добавлять дополнительный стиль.

[Ankhena]

Илья Петров,

max-width — от указанного размера и ниже, моя запись обозначает X < 1920px

Вот именно, от указанного размера и ниже, а вовсе не строгое <
Поэтому и говорю: поправьте.
А не про птичек с клювами :)))