jquery - 如何使用jquery根据屏幕宽度添加css

Question

我喜欢编写将添加margin:0 auto;到 div 的代码。

var bestsize = 1445;
 var width = $('.first-image').width();
if( width >= bestsize){
    $('.first-image').css({margin : '0 auto'});

}
else {
    $('.first-image').css({margin :' 0 0 -1px 0'});

}

first-image 是具有背景图像的 div

这就是我所拥有的，我认为它应该可以工作。但也许我没有正确说明。目前什么都不会发生。我觉得我没有以正确的方式使用宽度。如果这个解决方案不好，有人可以给我一个想法吗？

非常感谢 ：）

Answer 1

为什么你需要从 java-script 而不是使用 CSS 媒体查询呢？

.first-image{
  margin: 0 0 -1px 0;
}

@media (min-width: 1445px) {
  .first-image{
    margin : 0 auto;
  }
}

Answer 2

首先，您可以在调试控制台中看到任何内容吗？

jQuery 加载了吗？

尝试这个：

你需要把它包裹起来

$(document).ready(function()({});

在页面准备好时加载函数

和/或

$(window).resize(function(){});

在页面调整大小时加载功能。

我也会用$('.first-image').css('margin', '0 auto');