在桌面上隐藏 div，在移动设备上显示答案

【问题标题】：Hide Div on Desktop, Show On Mobile在桌面上隐藏 div，在移动设备上显示
【发布时间】：2016-04-04 16:05:26
【问题描述】：

我在 DIV 中有一个段落，我希望在宽度 > 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>

【问题讨论】：

标签： css width screen media display

【解决方案1】：

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

【讨论】：

【解决方案2】：

另一种方式

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

【讨论】：

【解决方案3】：

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

<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>

【讨论】：

【解决方案4】：

这样做

#mobileshow    { display:block; }

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

【讨论】：