Javascript没有改变Wordpress网站上div的边距

Question

我正在研究的这个网站（terraterraband.com）基本上在屏幕大小达到600px时添加一个菜单按钮（我认为）。我希望徽标图像的边距在同一时刻变为0。现在，我正在尝试使用javascript更改它，虽然我知道可能有一种方法可以用css来完成它。由于某种原因，它不会改变。当wordpress添加图像时，没有Id，只有一个类，这就是我必须使用getElementsByClassName函数的原因。 wordpress主题有一个添加javascript的窗口，它将它放在头脑中。我做错了什么？

jQuery(document).ready(function(){

   var logo=document.getElementsByClassName("site-logo");
   if(window.width<=600){
    logo[0].style.margin="0px";
   }
});

Answer 1

对于响应式编码，请尝试使用 innerWidth 。

jQuery(function(){
   var logo=jQuery(".site-logo");
   if(window.innerWidth<=600){
    logo[0].style.margin="0px";
   }
});

Answer 2

推断你的追求有点困难。但我相信你想要在你的徽标和版本之间减少空白。菜单。  

如果是这种情况，那么您正在尝试更改错误的元素。徽标的父容器之一的固定高度为200px。所以你真正想要改变的是.site-branding .container。

此处最简单的解决方案是使用CSS Media Query。

@media screen and (max-width: 600px) {
    .site-branding .container {
        height: auto;
    }
}

您的菜单也不会在600px更改，而是在1000px更改。所以我建议更改媒体查询以反映这一点。