html - 隐藏或显示内容的 css 媒体查询

Question

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

html

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

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

一个应该在移动屏幕上打印移动设备并隐藏桌面，另一个在桌面上显示但在移动设备上隐藏。

这是我的查询

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

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

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

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

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

我是媒体查询的新手，如果有人能指出我方法中的错误，我将不胜感激。

Answer 1

好的，默认情况下您希望手机显示。导致您获得以下内容:

#mobile-content {
    display: block;
}

#desktop-content {
    display: none;
}

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

    #desktop-content {
        display: block;
    }
}

这应该会导致移动内容默认可见，桌面内容默认不可见。当屏幕有 768px 或更大时，它将切换并隐藏移动内容和显示桌面内容。希望这对您有所帮助!