宽度不一样搁置元素数量不一样

要求:

  1. 小于某一宽度(1366)搁置3个,大于某一宽度(1366)搁置4个
  2. 搁置3个我的项目或4个我的项目时每个我的项目大小统一
  3. 所有我的项目居中展现

实现步骤

  • 写出页面骨架及款式
  • 窗口变动时获取页面宽度,不同宽度做不同调整
  • 应用css变量,js管制css变量
    <p>屏幕宽度低于1366显示3个<br>其余显示4个,也可通过点击按钮管制数量</p>    <button onclick="handleClick(3,'wrapperId')">设为3个</button>    <button onclick="handleClick(4,'wrapperId')">设为4个</button>    <div class="item2-wrapper" id="wrapperId">      <ul class="item-ul-2">        <li class="item-li-2">1</li>        <li class="item-li-2">2</li>        <li class="item-li-2">3</li>        <li class="item-li-2">4</li>        <li class="item-li-2">5</li>        <li class="item-li-2"></li>      </ul>    </div>
      body {        min-width: 1024px;      }      .item2-wrapper {        /* 元素数量 */        --count_number: 4;        /* 每个元素宽度 */        --width: 200px;        /* 每个元素的高度 */        --height: 200px;        /* 列间距 */        --col-gap: 20px;        /* 行间距 */        --row-gap: 20px;        /* 容器元素居中 */        margin: 0 auto;        /* 容器元素宽度,元素宽度*数量+列间距*(数量-1) */        width: calc(          var(--width) * var(--count_number) + var(--col-gap) *            (var(--count_number) - 1)        );        background-color: antiquewhite;      }      .item-ul-2 {        list-style-type: none;        -webkit-padding-start: 0;        /* 解决html未间断写导致浏览器渲染出间隙问题 */        font-size: 0;        /* 补充第一行和最初一行的上下边距 */        padding: calc(var(--row-gap) / 2) 0;        /* 宽度为宽度*数量+列间距*数量 */        width: calc(          var(--width) * var(--count_number) + var(--col-gap) *            var(--count_number)        );        /* 调整ul容器地位,使其居中 */        margin: 0 calc(var(--col-gap) / 2 * -1);      }      .item-li-2 {        width: var(--width);        height: var(--height);        /* 设置元素上下左右间距 */        margin: calc(var(--row-gap) / 2) calc(var(--col-gap) / 2);        font-size: 14px;        background-color: #00ffff33;        display: inline-flex;        justify-content: center;        align-items: center;        /* 设置对齐地位 可先正文掉该行查看成果 */        vertical-align: middle;      }
      function handleClick(number, elementId) {        var currentStyle = document.getElementById(elementId)        // 这里取到的值为字符串格局        var currentNumber = currentStyle.style.getPropertyValue(          '--count_number'        )        if (currentNumber !== number + '') {          currentStyle.style.setProperty('--count_number', number)        }      }      // 可增加节流(N毫秒内执行一次)或者防抖(事件进行N毫秒后执行)缩小触发次数      window.onresize = function () {        //   获取可视区域宽度        var width = document.documentElement.clientWidth        if (width < 1366) {          handleClick(3, 'wrapperId')        } else {          handleClick(4, 'wrapperId')        }      }

线上例子