知道为什么我的最小和最大宽度媒体查询不起作用吗？

Question

我正在尝试重新制作（或可能更改）我的 W3 School 启动模板版本。我有一个带有一些右对齐链接的导航栏，这些链接应该在桌面上可见而在移动设备上不存在，取而代之的是汉堡菜单。两者似乎都没有按设计进行。在宽屏上不应该可见的移动菜单按钮是（更糟糕的是，当视口变小时它会消失）......并且在 window 减少到之前不应该消失的桌面菜单项600 像素似乎在我的 1920 像素宽度显示的 50% 宽度附近留下了某处。

uncooperative elements

这是我的代码：

body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 1.7;
}

h1 {font-family: "Roboto", sans-serif}

h2 {font-family: "Roboto Condensed", sans-serif}

body,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}

.container {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999;
    padding: 0;
}

.navbar {
    width: 100%;
    height: 70px;
    z-index: 9999;
    margin: 0;
    top: 0;
    padding: 16px;
    overflow: hidden;
    background-color: #fff!important;
    color: #333!important;
    box-sizing: border-box;
}

.nav-right {
    float: right!important;
}

.navbar .nav-button {
    padding: 16px;
}

.navlogo {
    width: auto;
    height: 55px;
    margin: -17px 0px 0px 0px;
    padding: 0 10px;
    vertical-align: middle;
}

.navbar .navbar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0;
}

.navbar-block .navbar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0;
}

/* Full height header */
.header {
    background-position: center;
    background-size: cover;
    background-image: url("../images/headerImage.jpg");
    min-height: 100%;
  }

/* Media Queries */
@media (max-width: 600px) {
    .hide-mobile: {
        display: none!important;
    }
}

@media (min-width: 601px) {
    .hide-desktop: {
        display: none!important;
    }
}

  <div class="container">
    <div class="navbar" id="myNavigation">
        <!-- Site logo to the left -->
        <a href="#home"><img class="navbar-item navlogo" src="images/logo.png"></a>
        <!-- Menu links to the right -->
        <div class="nav-right hide-mobile">
            <a href="#about" class="navbar-item nav-button"><i class="fa fa-home"></i> HOME</a>
            <a href="#about" class="navbar-item nav-button"><i class="fa fa-lightbulb-o"></i> ABOUT</a>
            <a href="#about" class="navbar-item nav-button"><i class="fa fas fa-list-ol"></i> SERVICES</a>
            <a href="#about" class="navbar-item nav-button"><i class="fa fa-th"></i> PORTFOLIO</a>
            <a href="#about" class="navbar-item nav-button"><i class="fa fa-envelope"></i> CONTACT</a>
        </div>
        <!-- Hide floating links on mobile and give mobile menu -->
        <a href="javascript:void(0)" class="navbar-item nav-button nav-right hide-desktop" onclick="nav_open()"><i class="fa fa-bars"></i></a>
    </div>
  </div>
  <!-- Header with full-height image -->
<header class="header" id="home">
    <div class="w3-display-left w3-text-white" style="padding:48px">
      <span class="w3-jumbo w3-hide-small">Start something that matters</span><br>
      <span class="w3-xxlarge w3-hide-large w3-hide-medium">Start something that matters</span><br>
      <span class="w3-large">Stop wasting valuable time with projects that just isn't you.</span>
      <p><a href="#about" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">Learn more and start today</a></p>
    </div> 
    <div class="w3-display-bottomleft w3-text-grey w3-large" style="padding:24px 48px">
      <i class="fa fa-facebook-official w3-hover-opacity"></i>
      <i class="fa fa-instagram w3-hover-opacity"></i>
      <i class="fa fa-snapchat w3-hover-opacity"></i>
      <i class="fa fa-pinterest-p w3-hover-opacity"></i>
      <i class="fa fa-twitter w3-hover-opacity"></i>
      <i class="fa fa-linkedin w3-hover-opacity"></i>
    </div>
  </header>

Answer 1

您在媒体查询中输入的两个 class 之后都有一个 :。

.hide-mobile: {

应该是

.hide-mobile {

.hide-desktop 也一样class

知道为什么我的最小和最大宽度媒体查询不起作用吗？

Any Idea Why My Min and Max Width Media Queries Aren't Working?

css

media-queries

display