@Media Breaks CSS 较小时（例如屏幕）

Question

所以我正在开发一个响应式 Flexbox 菜单并且有：

@media screen and (min-width: 800px) {
  label, #mobile-nav {
    display: none;
  }
  )

这样标签按钮就会出现在上面的最小宽度处。现在它确实起作用了。标签在达到最小宽度之前不会显示，但是，它或其他原因导致 CSS 损坏并失去其样式：

删除的@media：

而在 Fire Fox Developer 中甚至没有显示标签：

/*hide the inputs/checkmarks and submenu*/
input, nav#mobile-nav {
  display: none;
}

/*position the label*/
label {
  position: relative;
  display: block;
  cursor: pointer;
}

/*show the submenu when input is checked*/
input:checked~nav#mobile-nav {
  display: block;
}

#mobile-nav {
  max-width: 100%;
}
#mobile-menu {
  display: flex;
  justify-content:space-around;
  flex-wrap: wrap;
  background: #000;
}
@media screen and (min-width: 800px) {
  label, #mobile-nav {
    display: none;
  }
)
.round {
  border-radius: 12px;
  border: 3px solid #000;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px;

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px;

  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px;
}

.mobile-wrapper {
  padding: 5px;
}
.menu-elements {
  padding: 0;
  margin: 0;
}
.heading-justify {
  padding-top: 5px;
}
.menu-element-heading {
  color: #fff;
  text-transform: uppercase;
}
.mobile-link-text {
  color: #f0eae1;
  text-decoration: none;
}
.mobile-print-text {
  color: #eff2f2;
  text-decoration: none;
  text-align: left;
  float: right;
  margin-left: 15px;
}

<input id="check01" type="checkbox" name="mobile menu" />
    <label for="check01"><!--<img src="include/img/mobile-menu.png">-->Image Button</label>
    <nav id="mobile-nav">
      <section class="round" id="mobile-menu">
        <div class="heading-justify" class="mobile-wapper">
          <dl class="menu-elements">
            <h4 class="menu-element-heading">Introduction</h4>
            <dt><a class="mobile-link-text" href="#">Home</a></dt>
            <dt><a class="mobile-link-text" href="#">Introduction</a></dt>
            <h4 class="menu-element-heading">Story</h4>
            <dt><a class="mobile-link-text" href="#">Prologue</a></dt>
            <dt><a class="mobile-link-text" href="#">Chapter One</a></dt>
            <dt><a class="mobile-link-text" href="#">Chapter Two</a></dt>
            <dt><a class="mobile-link-text" href="#">Chapter Three</a></dt>
            <dt><a class="mobile-link-text" href="#">Chapter Four</a></dt>
            <h4 class="menu-element-heading">Characters</h4>
            <dt><a class="mobile-link-text" href="#">Main</a></dt>
            <dt><a class="mobile-link-text" href="#">Others</a></dt>
          </dl>
        </div>
        <div class="mobile-wrapper">
          <dl class="menu-elements">
            <h4 class="menu-element-heading">Game Help</h4>
            <dt><a class="mobile-link-text" href="#">Abnormalities</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Accessories</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Additions</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Art of Fighting</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Enemies</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Experience</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Items</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Item Locations</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Shopping</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Sidequests</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Special Items</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Stardust</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Stardust Picture Guide</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Team/Stat Evaluation</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Weapons/Armor</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
            <dt><a class="mobile-link-text" href="#">Walkthrough</a><a class="mobile-print-text" href="#"> (Printable Version)</a></dt>
          </dl>
        </div>
        <div class="heading-justify" class="mobile-wapper">
          <dl class="menu-elements">
            <h4 class="menu-element-heading">Media</h4>
            <dt><a class="mobile-link-text" href="#">MIDIs</a></dt>
            <dt><a class="mobile-link-text" href="#">MP3s</a></dt>
            <dt><a class="mobile-link-text" href="#">Videos</a></dt>
            <dt><a class="mobile-link-text" href="#">Voice Clips</a></dt>
            <h4 class="menu-element-heading">Etc.</h4>
            <dt><a class="mobile-link-text" href="#">Contact</a></dt>
            <dt><a class="mobile-link-text" href="#">Gallery</a></dt>
            <dt><a class="mobile-link-text" href="#">Links In/Out</a></dt>
            <dt><a class="mobile-link-text" href="#">Notes</a></dt>
            <dt><a class="mobile-link-text" href="#">Voices/Lyrics</a></dt>
            <dt><a class="mobile-link-text" href="#">Translations</a></dt>
          </dl>
        </div>
      </section>
    </nav>

Answer 1

您在以下代码中使用了右括号 ) 而不是右花括号 }：

@media screen and (min-width: 800px) {
  label, #mobile-nav {
    display: none;
  }
  ) /* this should be a closing curly brace */

您必须使用正确的语法才能使代码正常工作。

@Media Breaks CSS 较小时（例如屏幕）

@Media Breaks CSS When Smaller (e.g. screen)

html

css

media-queries

flexbox

responsive-design