Html css媒体查询隐藏或显示内容

好的，我看不出这是怎么回事，我有两个

div

html

<div id="desktop-content">
desktop
</div>

<div id="mobile-content">
mobile
</div>

看起来很简单，除了在移动设备应该打印的时候桌面正在打印，而在桌面上所有的打印都在打印

---

我不太熟悉媒体查询，如果有人能指出我的错误，我将不胜感激。

好的，默认情况下，说你希望手机显示。使您获得以下信息：

#mobile-content {
    display: block;
}

#desktop-content {
    display: none;
}

@media screen and (min-width: 768px) {
    #mobile-content {
        display: none;
    }

    #desktop-content {
        display: block;
    }
}

---

这将导致移动内容默认为可见，桌面内容默认为不可见。当屏幕上有768px或更多时，它将切换并隐藏移动内容并显示桌面内容。希望这有帮助

第一次使用相同的css多次

像这样更改代码

@media screen and (min-width: 0px) and (max-width: 768px) {
    #mobile-content { display: block; }  /* show it on small screens */
    #desktop-content { display: none; }  /* hide it on small screens */
}

@media screen and (min-width: 789px) and (max-width: 1024px) {
    #mobile-content { display: none; }   /* hide it elsewhere */
    #desktop-content { display: block; }   /* show it elsewhere */
}

我们认为手机和平板屏幕从76PX

开始。 下面是一个工作示例

检查小提琴的大小

---

这是一个简单的错误，我在css参数之外的宽屏显示器上观看。简单的修复

@media screen and (min-width: 0px) and (max-width: 600px) {
    #mobile-content { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 601px)  {
    #mobile-content { display: none; }   /* hide it elsewhere */
}

@media screen and (min-width: 0px) and (max-width: 600px) {
    #desktop-content { display: none; }  /* hide iton small screens */
}

@media screen and (min-width: 601px) {
    #desktop-content { display: block; }   /* show it elsewhere */
}

---

你的代码可以工作。看小提琴。嗯，我觉得应该。在别的地方肯定有问题。谢谢你展示手机和desctop，我也遇到了同样的问题，请创建一个小问题

@media screen and (min-width: 0px) and (max-width: 600px) {
    #mobile-content { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 601px)  {
    #mobile-content { display: none; }   /* hide it elsewhere */
}

@media screen and (min-width: 0px) and (max-width: 600px) {
    #desktop-content { display: none; }  /* hide iton small screens */
}

@media screen and (min-width: 601px) {
    #desktop-content { display: block; }   /* show it elsewhere */
}