使用Javascript代碼的媒體查詢最小寬度

Question

目前，我在我的網站（ http://www.engagearcade.com ）上遇到問題，該問題的媒體查詢（最小寬度）未刪除所述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;
    }
}