CSS не выполняется в медиа-запросе - PullRequest
Новая
       33

CSS не выполняется в медиа-запросе

0 голосов
/ 26 мая 2020

Я пытаюсь сделать сайт размером с настольный компьютер адаптивным. Как только я начал, я заметил, что правило CSS читается браузером, однако оно не выполняется независимо от того, истинно правило медиа-запроса или нет. Я включил <meta content="width=device-width, initial-scale=1" name="viewport" />, без изменений. Не могу найти лог c браузера и почему он его не читает. 

div class="nav">
   <div class="logo"><a href="index.html">GETTI</a></div>
   <div class="nav-menu">
      <div class="menu-item"><a href="#">Home</a></div>
      <div class="menu-item"><a href="#">Why Choose Us</a></div>
      <div class="menu-item"><a href="#">How it works</a></div>
      <div class="menu-item"><a href="#">Teams</a></div>
      <div class="menu-item"><a href="#">Contacts</a></div>
    </div>

CSS: 

@media screen and (max-width: 768px) {
    body {
        width:100%;
    }
    .nav-menu {
        display:none;
    }
}

Я почему-то уверен, что это связано с тем, как был написан обычный (не отвечающий) CSS, поэтому я собираюсь включить это тоже. 

.nav-menu {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (20%)[auto-fill];
    grid-template-columns: repeat(auto-fill, 20%);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    line-height: 100%;
}

1 Ответ

2 голосов
/ 26 мая 2020

Если правила CSS находятся в том порядке, который вы разместили в своем вопросе (т.е. сначала медиа-запрос, затем общие правила), общие правила всегда перезаписывают правила из медиа-запроса (потому что они действительны для любого размера экрана). Просто измените порядок, чтобы избежать этого: сначала общие правила, затем медиа-запросы.

...