媒体使用Javascript代码查询min-width

Question

目前我的网站（http://www.engagearcade.com）存在问题，其中媒体查询（min-width）不会删除所述div中的Javascript代码。这是html：

<div id="advertisementslot1">

<script language="javascript" type="text/javascript" charset="utf-8">
(I can't show what's within here)
</script>
</div>

<div id="advertisementslot2">

<script language="javascript" type="text/javascript" charset="utf-8">
(I can't show what's within here)
</script>
</div>

这是css：

@media (min-width:1151px){

#advertisementslot1 {
box-shadow: 0px 0px 0px 4px rgba (255,255,0,0.9);
border-radius:16px;
opacity:0.8;
width:160;
height:600px;
position:absolute;
left:30px;
top: 475px;

}

#advertisementslot2 {
box-shadow: 0px 0px 0px 4px rgba (255,255,0,0.9);
border-radius:16px;
opacity:0.8;
width:160;
height:600px;
position:absolute;
right:30px;
top: 475px;

}

}

代码在某种意义上起作用，但它只删除了实际的div。脚本（广告）移动到角落的左上角，不会隐藏。我该如何解决这个问题？

干杯。

Answer 1

您应该在媒体查询之外定义容器，如果宽度不允许它们显示，则隐藏它们。

#advertisementslot1, #advertisementslot2 {
    box-shadow: 0px 0px 0px 4px rgba (255,255,0,0.9);
    border-radius:16px;
    opacity:0.8;
    width:160;
    height:600px;
    position:absolute;
    right:30px;
}

#advertisementslot1 {
    top: 475px;
}
#advertisementslot2 {
    top: 1095px;
}


@media only screen and (max-width: 1151px) {
    #advertisementslot1, #advertisementslot2 {
       display: none;
    }
}