Css 在桌面上隐藏Div，在手机上显示_Css_Width_Screen_Media_Display

Css 在桌面上隐藏Div，在手机上显示

css

Css 在桌面上隐藏Div，在手机上显示,css,width,screen,media,display,Css,Width,Screen,Media,Display,我在一个DIV中有一个段落，当宽度>500时，我希望完全隐藏该段落，当宽度

我在一个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>


#mobileshow{display:none；}
@媒体屏幕和屏幕（最大宽度：500px）{
#mobileshow{display:block；}
}
点击下面的图片下载

执行此操作

#mobileshow    { display:block; }

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

这样做

#mobileshow    { display:block; }

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

显然我的格式不对。在错误的位置有太多空格或换行符。不知道是哪个。以下是更新的代码：

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


#mobileshow{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：500px）{
#mobileshow{
显示：block；}
}
点击下面的图片下载

显然我的格式不对。在错误的位置有太多空格或换行符。不知道是哪个。以下是更新的代码：

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


#mobileshow{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：500px）{
#mobileshow{
显示：block；}
}
点击下面的图片下载

另一种方法

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

另一种方式

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

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

display:flex

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

display:flex