Question

由于某种原因，我不能让我的过渡与我的媒体查询一起工作。如果我在我的元素上添加悬停，它们的工作正常。这就是我的代码。响应NavBar

    <main>
        <nav>
            <div class="nav-cont">
                <a id="logo">Breiden Busch</a>
                <a id="hamburger"></a>
            </div>
            <div id="list">
                <a id="about" class="nav-buttons">About</a>
                <a id="contact" class="nav-buttons">Contact</a>
                <a id="social" class="nav-buttons">Social</a>
            </div>
        </nav>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <script src="./js/app.js"></script>
</body>
</html>

#logo {
line-height: 51px;
margin-bottom: 0;
font-weight: 600;
margin-left: 10px;
font-size: 18px;
transition: .5s;
}


@media (min-width: 600px) {

#hamburger {
    display: none;
}

nav {
    background: none;
    display: flex;
}

#logo {
    background: blue;
}

Answer 1

＆＃13;

<div id="box">Resize your browser into 600px</div>
<style>
    #box {
        width: 100px;
        height: 100px;
        background: blue;
        color: white;
        transition: .3s ease-in;
    }

    @media (max-width: 600px) {
        #box {
            background: red;
        }
    }
</style>

＆＃13;

Answer 2

我无法解释原因，但这是因为display: flex;元素上的nav属性。如果您删除它或移动媒体查询，它可以正常工作：

@media (min-width: 600px) {
  #hamburger {
      display: none;
  }

  nav {
      background: none;
  }

  #logo {
      background: blue;
  } 
}

See this fiddle

CSS Transition无法使用媒体查询

2 个答案: