Запросы к СМИ застряли - PullRequest
Новая
       9

Запросы к СМИ застряли

0 голосов
/ 28 сентября 2018

Я пытаюсь использовать медиа-запросы, чтобы скрыть или показать div в HTML: 

<div class="hide-medium hide-large">Test</div>

Со следующим CSS: 

@media screen and (min-width: 994px){
    .hide-large{
        display:none
    }
}
@media screen and (max-width: 993px){
    .hide-medium{
        display:none
    }
}
@media screen and (max-width: 601px){
    .hide-small{
        display:none
    }
}

Div правильно скрывается, когда браузеризмеренный соответственно;однако, когда размер браузера достигает 601 пикселей и ниже, div все еще остается скрытым.Что я делаю неправильно?

1 Ответ

0 голосов
/ 28 сентября 2018

Медиа-запросы Каскад .То есть при 601px ваш @media screen and (max-width: 601px) медиазапрос будет корректно действовать, но @media screen and (max-width: 993px) медиазапрос будет также , так как 601px меньше, чем 993px.Таким образом, к элементу применены оба медиазапроса.И поскольку ваш элемент по-прежнему имеет класс hide-medium на «малой» ширине, он все равно будет скрыт.

Если вы не хотите, чтобы это происходило, я бы рекомендовал явно установить min-widthна ваш средний медиа-запрос: 

@media screen and (min-width: 994px) {
  .hide-large {
    display: none
  }
}

@media screen and (max-width: 993px) and (min-width: 602px) {
  .hide-medium {
    display: none
  }
}

@media screen and (max-width: 601px) {
  .hide-small {
    display: none
  }
}
<div class="hide-medium hide-large">Test</div>

Также важно отметить, что медиазапросы в одной и той же таблице стилей применяются сверху вниз.Если у вас есть медиа-запрос «внизу», который имеет действительное правило для целевого элемента, он перезапишет все допустимые медиа-запросы, которые «выше».В этом отношении вы можете использовать только * min-width (для мобильных устройств) или max-width (для компьютеров) (без их смешивания).Это дополнительно объясняется здесь .

...