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

Как правильно делать?
  • Вопрос задан
  • 128 просмотров
Решения вопроса 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 Куратор тега CSS
чат для джунов t.me/developersjunior
Как указал автор выше, делаю я по такому же алгоритму.
*стили*
*стили до 767*
*стили до 992*
*стили до 1200*
и все
Именно в таком же порядке ибо, изменить иерархию и все хана кароче
Ответ написан
daemonhk
@daemonhk
ПсиХоПат
Во-первых, чем плох/не устраивает такой способ?

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

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

}

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

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

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