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

好吧，默认情况下你想要手机显示。使您获得以下内容：

status_code

这会导致移动内容默认可见，桌面内容默认为不可见。当屏幕具有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 */
}

我们认为移动设备和平板电脑屏幕从768px开始

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

检查调整小提琴的大小

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 media queriesto隐藏或显示内容

3 个答案: