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.io/bfoley650/pen/zYrvPmo

Answer 1

我不太确定我是否理解，但如果您想要的是响应能力，那么这是 css 的问题，而不是 js。

Here you have 如何在 css 中实现这一点，为元素添加了一些宽度和背景颜色，使其在视觉上更清晰。

基本上，我们的想法是有一个 flex-container 来处理那些内部元素的渲染方向（默认情况下是行 w/flex-wrap），或者当屏幕宽度为足够小了。

Javascript 响应度

Javascript responsiveness

javascript

screen-size

responsive