Question

因为我对jquery不太了解，所以绝对不要把头发拉出来。似乎没有任何地方提供黑白解决方案。

基本上，我正在尝试创建一个流畅且反应迅速的投资组合。列的宽度设置为390px但我希望它对于具有屏幕＆lt;移动设备的移动设备来说更小（320px）。 480像素。请有人帮我这个吗

这是代码

(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;
        }
}

<强>更新

如果您真的想使用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);
    ****/
}

wordpress模板的响应式布局

1 个答案: