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 或更大时，它将切换并隐藏移动内容和显示桌面内容。希望这对您有所帮助！

Answer 2

第一次使用相同的 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 */
}

we consider mobile and tablet screen starts from 768px

这是工作示例https://jsfiddle.net/3r1qe2Lc/3/

check resizing the fiddle

Answer 3

我在 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 */
}

css 用于隐藏或显示内容的媒体查询

css media queriesto hide or show content

html

css

media-queries