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

要求:

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')
        }
      }

线上例子