sorry_i_noob
@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%) и верстка едет.

Как правильно делать?
  • Вопрос задан
  • 110 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Правильного нет варианта. Есть более надёжный — диапазонами без стыков (по возможности).

То есть, лично я всегда делаю диапазонами по второму алгоритму, это позволяет избежать проблем и чётко разграничить стили, чтобы избежать перезаписи оных на всём протяжении указанных размеров 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 и на большом количестве других крупных сайтов. С тех с огромной радостью м использую.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Lord_Dantes
@Lord_Dantes
Front-end developer
Как указал автор выше, делаю я по такому же алгоритму.
*стили*
*стили до 767*
*стили до 992*
*стили до 1200*
и все
Именно в таком же порядке ибо, изменить иерархию и все хана кароче
Ответ написан
daemonhk
@daemonhk
ПсиХоПат
Во-первых, чем плох/не устраивает такой способ?

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

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

}

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

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

Войти через центр авторизации
Похожие вопросы
Стер 23 Москва
от 110 000 до 140 000 руб.
SMMplanner Москва
от 100 000 до 150 000 руб.
Design, Code and Robots Санкт-Петербург
от 50 000 до 80 000 руб.
23 сент. 2019, в 14:03
10000 руб./за проект
23 сент. 2019, в 14:01
10000 руб./за проект
23 сент. 2019, в 13:46
2000 руб./за проект