@r_g_b_a

@media min-width и max-width вместе на одном брейкпоинте?

Здравствуйте.
Интересует вопрос, нормально ли использовать в медиа-запросах min-width и max-width вместе к одному и тому же брейкпоинту?
Приведу пример - фон блока на телефоне красный, а на планшете черный.
Как это обычно делают при mobile first:
div {font-size:14px; background-color: #f00}
@media (min-width: 768px) {
div {background-color: #000} /*переопределяем фон*/
}

В тех гайдах, что я читал про mobile first говориться, что сначала нужно писать стили по умолчанию, а в медиазапросах по необходимости их переопределять. Но что, если сделать так:
div {font-size:14px}
@media (max-width: 767.98px) {
div {background-color: #f00}
}
@media (min-width: 768px) {
div {background-color: #000}
}

Код в инспекторе становиться намного чище на реальном сайте. Особенно полезный такой подход в ситуации, когда мы добавляем какой-нибудь класс с помощью js, который должен работать при определенной ширине дисплея.
К примеру, делаем мобильное сабменю открытым при клике. Но такое состояние не желательно, если мы повернули устройство и экран стал отображать десктопный вид, так как тут должен срабатывать :hover, а сабменю уже в открытом состоянии из-за класса. И тут приходиться либо отслеживать ширину экрана с помощью js и снимать класс, либо перебивать мобильные настройки через !important
Почему такой подход не используется, или я плохо искал?
  • Вопрос задан
  • 594 просмотра
Пригласить эксперта
Ответы на вопрос 1
Seanyr
@Seanyr
Такое используется, когда это целесообразно.
С той же целью еще можно min и max использовать в одном запросе, например:
@media (min-width: 768px) and (max-width: 1023px) {...}

Но пихать все перезаписываемые свойства под медиа-запросы я считаю не очень хорошей практикой по нескольким причинам:
- это усложняет структуру кода, и ухудшает читаемость
- хоть в инспекторе и отображается меньше свойств , но сам css файл растет, а на скорость загрузки влияет именно он
- так же свойства по-умолчанию прописываются для максимальной совместимости, хотя это скорее всего уже неактуально
Это сугубо моё мнение, интересно было бы послушать другие.
п.с. А вот с использованием дробных значений в брэйкпойнтах я на сталкивался
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы