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

时间:2015-12-30 16:50:25

标签: css width screen media display

我在DIV中有一个段落,当宽度为&gt;时我想要完全隐藏500并且当宽度<1时显示。 500.我不确定这里有什么问题。

function Button({name}) {
  return (<button>{name}<button>);
}

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

这样做

#mobileshow    { display:block; }

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

答案 2 :(得分:0)

另一种方式

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

答案 3 :(得分:0)

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