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

Question

[sorry_i_noob]

Здравствуйте.
Я имею в виду вот такие стыки:

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .some-div {
    width: 500px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
  .some-div {
    width: 250px;
  }
}

Я видел в некоторых сайтах для min пишут значение на 1 пиксель больше. То есть, вот так:

@media only screen and (min-width: 769px) and (max-width: 992px) {
  .some-div {
    width: 500px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .some-div {
    width: 250px;
  }
}

Как правильно? Может, не первый и не второй вариант, а третий? То есть, как-то иначе?
Да, я могу проверить и определить. Но есть проблема (в Хроме - точно), связанная с отображением sub-пикселей. Если увеличить размер интерфейса в Windows (у меня увеличенный), то стыки могут не состыковаться (состыкуется или нет - зависит от того, на сколько увеличивать).

У меня было такое, что дома у меня верстка работает корректно. Дома у меня интерфейс увеличен на 175%. Открываю сайт на работе (там увеличен интерфейс на 150%) и верстка едет.

Как правильно делать?

Comments

[alex-1917]

max-width: 992px - это путь рукожопа в никуда
выбросьте эти примеры и верстайте по канонам, частично озвучено Рустамом

Answer 1

[Rustam Bainazarov]

Правильного нет варианта. Есть более надёжный — диапазонами без стыков (по возможности).

То есть, лично я всегда делаю диапазонами по второму алгоритму, это позволяет избежать проблем и чётко разграничить стили, чтобы избежать перезаписи оных на всём протяжении указанных размеров viewport.

Например:

@media (max-width: 767px) {

}

@media (min-width: 768px) and (max-width: 1023px) {

}

@media (min-width: 1024px) and (max-width: 1199px) {

}

@media (min-width: 1200px) {

}

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

UPDATE. Это не я такой умный и придумал такую схему. Я прочитал про неё ещё давно на Medium, потом увидел в работе на разных сайтах сервисов Google, на сайте Stripe и на большом количестве других крупных сайтов. С тех с огромной радостью м использую.

Comments

[sorry_i_noob]

Рустам Байназаров, еще неизвестно, как на телефонах эти стыки будут отображаться. Там еще больше браузеров.
Получается, что нужно просто забить на то, что верстка на определенной ширине может отображаться некорректно?

[Rustam Bainazarov]

sorry_i_noob, что неизвестно? Какие стыки? У вас нет пустых мест. Читайте диапазоны внимательнее из примера.

[Rustam Bainazarov]

sorry_i_noob, в данном примере покрыты разрешения от 0 до бесконечности. Ни единого пропущенного значения ширины нет.

[Rustam Bainazarov]

sorry_i_noob, более того, при чём тут количество браузеров на мобильных, когда мы про медиазпросы?

[sorry_i_noob]

Рустам Байназаров, я боюсь, что на определенном значении увеличения интерфейса windows верстка все же будет отображаться некорректно. А обязательно писать запросы от меньшего (код выше) к большему (код ниже)?

[Rustam Bainazarov]

sorry_i_noob, вы боитесь или знаете? :))

Масштабирование системы увеличивает viewport, проблем в этом нет. С учётом отсутствия пропуска значений viewport, не будет и проблем с медизапросами.

Если будете по моей схеме — нет, не обязательно.

[Rustam Bainazarov]

sorry_i_noob, если найдёте вот тут стык, где не работает, то можно выписывать медаль:
https://jsfiddle.net/Lmzh9psk/show

Нужно именно в таком режиме смотреть и сжимать именно окно браузера, а не панель результата, ибо там из-за трансформаций неверно определяются стыки при дробном значении.

[sorry_i_noob]

Рустам Байназаров, ваша схема заключается в том, что min-width всегда на 1px больше, чем max-width?

[Rustam Bainazarov]

sorry_i_noob, да. В противном случае у вас будет наслоение диапазонов.

Например, тут сработают оба медиазапроса при ширине viewport 767px.

@media (max-width: 767px) {

}

@media (min-width: 767px) {

}

Соответственно, из второго запроса подтянутся те стили, которые вам не нужны. А оно вам надо?

[Rustam Bainazarov]

sorry_i_noob, это не я такой умный и придумал такую схему. Я прочитал про неё ещё давно на Medium, потом увидел в работе на разных сайтах сервисов Google, на сайте Stripe и на большом количестве других крупных сайтов.

Answer 2

[Lord_Dantes]

Как указал автор выше, делаю я по такому же алгоритму.
*стили*
*стили до 767*
*стили до 992*
*стили до 1200*
и все
Именно в таком же порядке ибо, изменить иерархию и все хана кароче

Comments

[Rustam Bainazarov]

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

[Rustam Bainazarov]

Типа так тоже всё будет работать, потому что совпадений не будет, даже с косым порядком:

@media (min-width: 1200px) {

}

@media (max-width: 767px) {

}

@media (min-width: 1024px) and (max-width: 1199px) {

}

@media (min-width: 768px) and (max-width: 1023px) {

}

[Lord_Dantes]

Рустам Байназаров, а как относится указывание минимальной и макс ширины, я вроде указал как бы я делал.
Я бы не делал то что вы выше прикрепили типо там неверно как по мне.

[Lord_Dantes]

Рустам Байназаров, она у вас такая

@media (max-width: 767px) {

}

@media (min-width: 768px) and (max-width: 1023px) {

}

@media (min-width: 1024px) and (max-width: 1199px) {

}

@media (min-width: 1200px) {

}

А вы говорите если буду следовать вашему примеру то это неправильно и скидываете другой код, лол

[Rustam Bainazarov]

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

Это как доп. защита от человеческой ошибки, смотри:
https://jsfiddle.net/m1e9ckyg/show

Всё работает, даже потому что нет наложения диапазонов, поэтому иерархия может быть нарушена.

Так делать не стоит, конечно, в силу красоты кода и ситуации, если надо будет добавить иерархию, чтобы не запутаться.

[Lord_Dantes]

Рустам Байназаров, а вы дали совет типо, я думал решили поправить меня или захейтить. Тогда извиняюсь, совет хороший но я знал его до этого прост)) А так спасибо

[Rustam Bainazarov]

slave, да я дурак, что ли? Нет, конечно.

(Наверное.)

Answer 3

[Одиночка Айс]

Во-первых, чем плох/не устраивает такой способ?

@media all and (max-width:1030px) {

}
@media all and (max-width:960px){

}

Во-вторых, не нужно упираться в конкретные точки вьюпортов (768,640), лучше перестраивать заранее
В-третьих, зачем указывать диапазон от-до, только если вы не строите элементы по минимальной границе, то есть с 1024 до 768 дизайн показывается как на 768, а все, что выше (до 1024) просто добавляет отступы по бокам.