Question

我想从此

中完全删除我的地图

屏幕尺寸减小时。

Div Id：

id="mapdiv"

谢谢！

Answer 1

因此，要使用CSS执行特定操作，您需要进行媒体查询。我建议你谷歌媒体查询，以了解他们做了什么以及他们如何工作。我也在下面举了一个例子。媒体查询基本上是在屏幕宽度与查询匹配时执行的语句。例如，如果屏幕小于1200px或979px。

Media breakpoints not working on wordpress

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

在您的情况下，您需要560px的自定义媒体查询：

@media only screen and (max-width : 560px) {
   #mapdiv {
      display: none;
   }
}

这是做什么的;当屏幕尺寸低于560px宽度时。它会执行/覆盖css。我们所说的是带有id的div：mapdiv添加css规则：display none（隐藏元素）。

要使mediaqueries / viewport正常工作，您还需要在标题中添加以下行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

当屏幕尺寸减小时，删除元素

1 个答案: