Html 为什么我的DIV没有出现在手机上？

我试图以屏幕分辨率显示/隐藏HTML代码。 我可以在我的台式计算机上看到DIV新闻框(news\u box)桌面，但在我的手机上根本看不到任何DIV（而新闻框(news\u box)桌面应该是可见的） 问题是什么？ 谢谢

HTML:

试试这个：

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

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

---

这里是，我已经在我的手机中检查了它的输出。

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

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

我还建议您将所有CSS置于外部（我在下面的示例中为您这样做了），因为它将带来更简单的维护、规则的重用和更清晰的标记

标题{
位置：相对；/*所以您的桌面显示在标题内*/
}
.新闻箱手机{
显示：无；/*因此默认情况下手机处于隐藏状态*/
位置：相对位置；
宽度：90%；
保证金：自动；
左：0；
右：0；
文本对齐：左对齐；
}
.news\u box\u桌面{
位置：绝对位置；
底部：20px；
右：20px；
宽度：380px；
浮动：对；
文本对齐：左对齐；
}
@仅介质屏幕和（最大宽度：40em）{
.news\u box\u桌面{
显示：无；
}
.新闻箱手机{
显示：块；
}
}

桌面
mobile

为什么不使用

px

而不是

em

？您的

新闻箱\u mobile

div

在

标题之外，是否就是这样。提供一个工作示例。您的代码看起来很好，以防设备
中的最大宽度40em。应显示news\u box\u mobile
。寻求调试帮助的问题（“为什么此代码不工作？”）必须包括所需的行为、特定问题或错误，以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：。为什么不考虑40em以下的分辨率，例如39.9em。可能是您正在使用的仿真器（或设备）看到的40em高于移动显示器？只是想一想。非常感谢你的回答！实际上，它看起来与我的初始代码完全相同，但出于某种原因，news\u box\u mobile没有显示（这不是@media的问题，因为其他参数都已应用）。请看一下live页面，并告诉我您是否能够确定问题是什么？非常感谢@格雷格快速看了一眼后，我看到了两件事，1:
\news\u box\u mobile{…}
-这条规则的目标是一个id，而不是你的类…2：你的
news\u box\u mobile
div的内容是空的，因此没有什么可看的。。。所以我建议你给背景上色，给它一个尺寸，或者给它加一个文字，你很可能会在屏幕上看到它page@Greg当然，您可以使用dev.tools，查找并操作它的设置，以查看它在何处以及如何显示感谢您的帮助！
@media only screen and (max-width: 40em) {
.news_box_desktop {
    display: none;
}
.news_box_mobile {
    display: block;
}
}

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

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