Question

基本上我正在构建一个简单的着陆页，它将是全宽并包含一个图像网格。图像的容器（li）为17％

当我崩溃我的浏览器时，我知道我可以使用媒体查询来更改li容器的大小，但是如何使用jquery执行此操作？

我有6个坐在一排但是当我缩小窗口时我想连续5个然后当我进一步收缩浏览器时我想要4等等

听起来有点令人困惑 - 任何帮助都会非常感激

提前谢谢

<div class="container">
<ul> 
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
 <li class="landscape"><a class="button" href="popup2"><img src="/someimg.jpg" class="img-responsive" /></a></li>
</ul>
</div>

Answer 1

每次用户调整窗口大小时，都可以使用window.resize函数。

jQuery - ＆gt;

 $( window ).resize(function() {
  // put your code here
});

javascript - ＆gt;

window.onresize = function(event) {
    // put your code here
};

Answer 2

你仍然可以通过媒体查询和css实现你想要的，你有什么理由需要使用jquery吗？

修改每个断点处的li宽度以填充100％容器。例如33％在768px（3张图像），25％在1024px（4张图像）等等

如果要删除这些元素，只需使用第n个子选择器以相对大小隐藏它们。如果它们是可见的，则下面将以您指定的大小显示（我假设这些元素使用浮点数）

Answer 3

为容器width:100%和li固定宽度或inline-block https://jsfiddle.net/vv6t9pud/

响应列表在浏览器缩小时重新排列

3 个答案: