Здравствуйте.
Интересует вопрос, нормально ли использовать в медиа-запросах 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
Почему такой подход не используется, или я плохо искал?