Javascript 使用jQuery根据页面宽度更改CSS样式

我正在我们网站的标题上设置A/B测试。按照我们软件的工作方式，我无法设置CSS样式，除非：

类/ID对于一个变体是唯一的

您希望css应用于所有变体

所以我要做的是使用jQuery重新创建媒体查询，这样我就可以重新设置标题的样式，确保它在所有大小下都正确显示。这就是我到目前为止所做的：

$(document).ready(function(){

    var width = $(window).width();
    if (width > 1380) {
        $("logo").css("margin-top","0");
     } elseif ((width <= 1380) && (width > 1020))  {
        $("logo").css("margin-top","100px");
     } elseif ((width <= 1020) && (width > 750))  {
        $("logo").css("margin-top","40px");
     } elseif (width <= 750)  {
        $("logo").css("margin-top","150px");
     }

});

$（文档）.ready（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度>1380）{
$（“logo”）.css（“页边空白顶部”、“0”）；
}elseif（（宽度1020））{
$（“logo”）.css（“页边空白顶部”、“100px”）；
}elseif（（宽度750））{
$（“logo”）.css（“页边空白顶部”、“40px”）；
}elseif（宽度
如果
有空格，则为else

$(document).ready(function(){

    var width = $(window).width();
    if (width > 1380) {
        $("logo").css("margin-top","0");
     } else if ((width <= 1380) && (width > 1020))  {
        $("logo").css("margin-top","100px");
     } else if ((width <= 1020) && (width > 750))  {
        $("logo").css("margin-top","40px");
     } else if (width <= 750)  {
        $("logo").css("margin-top","150px");
     }

});

$（文档）.ready（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度>1380）{
$（“logo”）.css（“页边空白顶部”、“0”）；
}否则，如果（（宽度1020））{
$（“logo”）.css（“页边空白顶部”、“100px”）；
}否则，如果（（宽度750））{
$（“logo”）.css（“页边空白顶部”、“40px”）；
}否则，如果（宽度您应该使用@media css元素执行此操作：

@media screen and (min-width: 1380px) {
    .logo {
        margin-top: 0px;
    }
}
@media screen and (min-width: 1020px) and (max-width: 1379px) {
    .logo {
        margin-top: 100px;
    }
}

等等，在javascript中，如果这样做，您就不会做其他事情

如果
，则必须使用
。
看看这个：

但是，毕竟，您应该使用@media查询来实现这一点

@media screen and (min-width: 1024px) and (max-width: 1380px) { 
    // do stuff 
}

考虑与多个其他ifs相反的开关情况：

switch(true){
      case(width > 1380):
          //Do stuff
      break;
      case((width <= 1380) && (width > 1020)):
          //Do stuff
      break;
      case((width <= 1020) && (width > 750)):
          //Do stuff
      break;
      default:
          // Do stuff if nothing above works

}

开关（真）{
外壳（宽度>1380）：
//做事
打破
大小写（（宽度1020））：
//做事
打破
外壳（（宽度750））：
//做事
打破
违约：
//如果上面什么都不起作用，那就去做吧
}


此外，如果需要，请在其他位置安装合适的桑塔克斯
您应该使用@media css元素来执行此操作。这是在我们的live站点的代码中实现更改时的操作方式。但现在，它位于optimizely中。在这种情况下，我无法设置媒体查询，因为它将应用于原始和新的变体。我正在尝试重新排列站点的标题。我我真的不明白否决票，我很清楚我知道我应该使用媒体查询，但在这种情况下不能。你可以删除（答案底部的按钮）如果您认为它不再相关。答案仍然相关，只是与这个特定的问题无关。但我不希望看到人们使用javascript来解决这个问题。没错，这是一个很好的通用参考（并且没有错误，所以没有否决票：）。我想，在某种程度上，我的评论现在也属于相同的领域“与预期受众无关，但可能是有用的一般知识”我更改了这个，现在它是说var width=$（window.width（）；不是函数因此，您可以通过删除我们网站控制台中使用的所有
宽度来简化您的条件，您的代码不会出现任何错误，但它根本不会设置css规则。@谜题84：如果加载了jQuery，则会给您函数指针本身，而不是宽度。您可能建议使用
$（窗口）[0].width
可能未定义，因为
width
通常不在
窗口
对象上定义（尽管可以将其定义为全局变量）@idontwantnoscrubs：在控制台中使用时，您希望只使用回调函数的主体。
document.ready
已经发生，因此它不会触发您的脚本。简而言之，是的。对于这种情况。jQuery（document.ready（）中的函数；当jQuery确定文档已完全加载时激发。它还将代码封装在函数中，以便分配的任何变量都不会影响任何全局变量。因为您的代码将修改DOM元素的CSS规则，所以您只需要在DOM完全加载后运行，因此document ready是将代码放入此函数的好地方凯斯，是的。
@media screen and (min-width: 1024px) and (max-width: 1380px) { 
    // do stuff 
}

switch(true){
      case(width > 1380):
          //Do stuff
      break;
      case((width <= 1380) && (width > 1020)):
          //Do stuff
      break;
      case((width <= 1020) && (width > 750)):
          //Do stuff
      break;
      default:
          // Do stuff if nothing above works

}