在桌面上隐藏 Div，在移动设备上显示

Question

我在 DIV 中有一个段落，我想在宽度 > 500 时完全隐藏它，并在宽度 < 500 时显示它。我不确定这里有什么问题。

<head>
<style type="text/css">
#mobileshow    { display:none; }

@media screen and (max-width: 500px) {
#mobileshow   { display:block; }
}
</style>
</head>

<div id="mobileshow"><p>Click the images below to download.</p></div>

Answer 1

这样做

#mobileshow    { display:block; }

@media screen and (min-width: 500px) {
    #mobileshow   { display:none; }
}

Answer 2

显然我的格式有误。在错误的地方有太多空格或换行符。不确定哪个。这是更新后的代码：

<style type="text/css">
#mobileshow { 
display:none; 
}
@media screen and (max-width: 500px) {
#mobileshow { 
display:block; }
}
</style>

<div id="mobileshow"><p>Click the images below to download.</p></div>

Answer 3

另一种方式

@media only screen and (min-width: 500px) {
#mobileshow  {
display: none !important;}
}

Answer 4

如果您在主元素中使用 display flex，请不要使用 display block，因为它会破坏元素的样式，请使用 display:flex

在桌面上隐藏 Div，在移动设备上显示

Hide Div on Desktop, Show On Mobile

css

media

screen

width

display