Javascript响应性

问题描述 投票:0回答:1

我有一个项目阵列,这些项目被切成片和拼接,在不同的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

javascript responsive screen-size
1个回答
0
投票

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

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

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

热门问题
推荐问题
最新问题