html - 为什么我的 DIV 没有显示在移动设备上？

Question

我正在尝试根据屏幕分辨率显示/隐藏 HTML 代码。我可以在台式电脑上看到 DIV news_box_desktop，但在我的手机上根本看不到任何 DIV(而 news_box_mobile 应该是可见的)问题是什么？谢谢，

HTML:

<header class="clearfix">
  <a href="index.html" title=""><img class="logo" src="images/blue.png" alt=""></a>
  <div class="menu-container">
    <nav>
      <ul id="menu">
        <li> <a href="index.html">Accueil</a> </li>
        <li class="selected"> <a href="biographie.html">Biographie</a> </li>
      </ul>
    </nav>
  </div>
  <div id="news_box" class="news_box_desktop" style="position: absolute; bottom:20px; right: 20px; width: 380px; float: right; text-align: left;"></div>
</header>
<div id="news_box" class="news_box_mobile" style="position: relative; width: 90%; margin:auto; left: 0; right: 0; text-align: left;"></div>

CSS:

@media only screen and (max-width: 40em) {
.news_box_desktop {
    display: none;
}
.news_box_mobile {
    display: block;
}
    }

Answer 1

您需要进行以下更改才能使其正常工作。

header {
  position: relative;       /* so you desktop show inside header */
}
.news_box_mobile {
  display: none;            /* so your mobile is hidden by default */
}

我还可以建议您将所有 CSS 放在外部(我在下面的示例中为您做到了)，因为它会带来更简单的维护、规则的重用和更清晰的标记。

header {
  position: relative;       /* so you desktop show inside header */
}
.news_box_mobile {
  display: none;            /* so your mobile is hidden by default */
  position: relative;
  width: 90%;
  margin:auto;
  left: 0;
  right: 0;
  text-align: left;
}

.news_box_desktop {
  position: absolute;
  bottom:20px;
  right: 20px;
  width: 380px;
  float: right;
  text-align: left;
}


@media only screen and (max-width: 40em) {
  .news_box_desktop {
    display: none;
  }
  .news_box_mobile {
    display: block;
  }
}

<header class="clearfix">
  <a href="index.html" title=""><img class="logo" src="images/blue.png" alt=""></a>
  <div class="menu-container">
    <nav>
      <ul id="menu">
        <li> <a href="index.html">Accueil</a> </li>
        <li class="selected"> <a href="biographie.html">Biographie</a> </li>
      </ul>
    </nav>
  </div>
  <div id="news_box" class="news_box_desktop">desktop</div>
</header>
<div id="news_box" class="news_box_mobile">mobile</div>