Как использовать 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'}); 

} 

первый образ является DIV, который имеет фоновое изображение

Это то, что у меня есть, я думаю, он должен работать. но, возможно, я не утверждаю это правильно. в настоящее время ничего не произойдет. Я чувствую, что не использую ширину надлежащим образом. Может кто-нибудь дать мне идею, если это решение не хорошо?

Большое спасибо :)

Answer 1

почему вы должны сделать это из Java-скрипта, вместо использования запросов 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');