Объединение запросов jQuery и CSS Media

Question

Я использую этот код, чтобы вызвать материал при изменении размера окна.

CSS

@media only screen and (min-width : 320px) and (max-width : 768px) { 
    .placeholder { 
     width:100%; 
    } 

JS

if ($(window).width() <= 768){ 
$('#middle').hide(); 
$('.left').removeClass('hidden'); 

} else { 
$('#middle').show(); 
$('.left').addClass('hidden'); 
} 
}); 

Однако это является несоответствие между запросом CSS медиа в 768 и шириной окна JQuery 768, потому что они делают не появляются одновременно. Это что-то объяснить на этой большой статье, http://www.fourfront.us/blog/jquery-window-width-and-media-queries

Однако, когда я пытаюсь применить это как

if ($(".placeholder").css("width") === "100%") { 
     $('.left').removeClass('hidden'); 
     $('#middle').hide(); 
    } else { 
     $('#middle').show(); 
     $('.left').addClass('hidden'); 
    } 

Это не работает. Я пробовал применять другие значения css, например, 2px margin, но это также не работает. Что я делаю не так? Может ли кто-нибудь помочь? Большое спасибо.

Answer 1

Как сказал Мехди , $ (". placeholder"). css ("width") вернет вам значение px. Чтобы решить эту проблему вы можете добавить еще один стиль для вашего класса, который не будет влиять на ваш дизайн как border-color: rgb(255, 0, 0); и использовать его для вашего если ..

Смотреть это example

Answer 2

даже если вы установите width:100%, $(".placeholder").css("width") даст вам ширину в рх

DEMO

if ($(".placeholder").css("width") == $(window).width()+"px")//or $(container).width() 

означает .placeholder ширина составляет 100%, если рентабельность = 0