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

Question

[Данила Кудашов]

Какие значения используете вы? Просто насчёт своих я не очень уверен, может есть какой-нибудь стандарт.

* {
    box-sizing: border-box;
}

.container {
    max-width: 1170px;
    margin: auto;
}

@media (max-width: 1182px) {
    .container {
        max-width: 970px;
    }
}

@media (max-width: 993px) {
    .container {
        max-width: 750px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: none;
        padding: 0 10px;
    }
}

Comments

[WapSter]

От макета зависит, бывают и такие, что каждые 100пх нужно ставить)

[Александр]

К ответу не относится, но хочется дать пару советов. Так как используется SASS, то можно media-запросы писать прямо внутри селектора. Еще max-width: none; как-то не очень, лучше max-width: unset;.

Answer 1

[Alex]

Не используйте глобальные значения. Описывайте конкретные значения для конкретного компонента.
Скажем, широкий слайдер нужно переработать уже при ширине 1000px, а вот виджеты в подвале начинают не помещатся только на 600px.

/* Slider component */
.slider {
}

@media (max-width: 1000px) {
  .slider {
  }
}

/* Footer widget component */
footer .widget {
}

@media (max-width: 600px) {
  footer .widget {
  }
}

В этом случае, верстка будет куда более гибкой.

Но, если говорить про "стандарт" то за него можно брать сетку бутстрапа, так как именно её чаще всего используют дизайнеры.

Answer 2

[Abr_ya]

Сетка Бутстрапа + разрешения наиболее популярных устройств, под которые вы планируете мобильную версию.
Как правило это:
- телефон поменьше,
- телефон побольше или в горизонтальном положении,
- планшет,
- ноутбук,
- ПК.
Т.е. всё привязано, более-менее, к статистике использования. А значит хорошо бы хоть примерно смоделировать свою целевую аудиторию. Или посмотреть статистику устройств, если проект уже работает.