Javascript响应性

Question

我有一个项目阵列，这些项目被切成片和拼接，在不同的div中显示为两列。

我想要的是当屏幕尺寸变小时，一列的项目可以跳到另一列，这样在小屏幕上就会显示为一列。我只在网上找到与jquery相关的东西，但我想使用vanilla JS。我该怎么做呢？任何帮助都是非常感激的!

let arr = [
  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'
];

let hey = arr.slice(4);
let heyArray = arr.splice(0, 4);

document.getElementById('displayA').innerHTML = '<li><a href="#">' + hey.join('</a></li><li><a href="#">') + '</a></li>';

document.getElementById('displayB').innerHTML = '<li><a href="#">' + heyArray.join('</a></li><li><a href="#">') + '</a></li>';

div {
  float: right;
  margin-right: 1.2em;
  padding: 0 20px;
}

<div id="displayA"></div>
<div id="displayB"></div>

https:/codepen.iobfoley650penzYrvPmo

Answer 1

我不太清楚我的理解，但如果你想要的是响应性，那么就应该是 css的问题，而不是 js.

在这里，你有 如何在css中实现，给元素加了一些宽度和背景色，这样视觉上更清晰。

基本上，我们的想法是有一个 flex-container 处理这些内部元素的渲染方向（默认为行，柔性包覆），或者当屏幕宽度足够小时，将该容器设置为列。