resplaive布局的WordPress模板

Question

绝对拉我的头发在这一个，因为我不太了解jquery。似乎没有任何地方提供黑白解决方案。

基本上，我正在尝试创建一个流畅而敏感的投资组合。列的宽度设置为390px，但我希望它的大小（320px）适用于屏幕为< 480px的移动设备。谁能帮我这一个请

下面是代码

(function($) { 
// $() will work as an alias for jQuery() inside of this function 

var ww = document.body.clientWidth; 

$(window).load(function(){ 

    // Masonry.js 
    var $container = $('#posts'); 

    $container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.box', 
     columnWidth: 390, 
     isFitWidth: true 
    }); 

    }); 

}); 

Answer 1

使用CSS media queries

@media (max-width: 481px) { 
     .box{ 
      width:100%; 
      max-width:320px; 
     } 
} 

UPDATE：

如果你真的想使用JavaScript，然后有一个看看window.matchMedia

var mq = window.matchMedia("(max-width: 481px)"); 
if (mq.matches) { 
    var myBox = document.querySelector(".box"); 
    myBox.style.width = "320px"; 
    /*****JQUERY 
    var styles = { 
      width:320px 
    }; 
    $(".box").css(styles); 
    ****/ 
}