如何基于屏幕尺寸动态调整正方形大小实现无滚动全屏铺满效果

核心要求满足说明 #

• 无滚动条：通过设置body的overflow: hidden + 宽高为100vw/100vh实现，不会超出视口范围
• 动态适配：监听窗口resize事件，屏幕尺寸变化时自动重新计算方块大小重绘
• 正方形保证：所有方块宽高完全相等，无拉伸变形

实现方案 #

方案1：JS动态计算最优尺寸（完美适配） #

该方案通过计算视口宽高的最大公约数得到最大的可铺满正方形边长，保证方块大小统一，完全铺满无空隙。
完整可运行代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全屏正方形铺满</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      overflow: hidden;
      width: 100vw;
      height: 100vh;
    }
    .square-wrap {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
    }
    .square-item {
      border: 1px solid #e5e5e5;
      background: #fff;
    }
  </style>
</head>
<body>
  <div class="square-wrap"></div>
  <script>
    const wrap = document.querySelector('.square-wrap')
    // 计算最大公约数
    const calcGCD = (a, b) => b === 0 ? a : calcGCD(b, a % b)
    // 渲染方块
    const render = () => {
      wrap.innerHTML = ''
      const screenW = window.innerWidth
      const screenH = window.innerHeight
      // 最优正方形边长
      const squareSize = calcGCD(screenW, screenH)
      // 行列数
      const col = screenW / squareSize
      const row = screenH / squareSize
      // 批量生成节点
      const fragment = document.createDocumentFragment()
      for(let i = 0; i < col * row; i++) {
        const item = document.createElement('div')
        item.classList.add('square-item')
        item.style.width = `${squareSize}px`
        item.style.height = `${squareSize}px`
        fragment.appendChild(item)
      }
      wrap.appendChild(fragment)
    }
    // 初始化渲染
    render()
    // 窗口尺寸变化时重新渲染，可自行添加防抖优化性能
    window.addEventListener('resize', render)
  </script>
</body>
</html>

方案自定义调整说明 #

如果需要更大的方块，可将计算得到的squareSize乘以整数倍数n，只要满足screenW % (squareSize * n) === 0且screenH % (squareSize * n) === 0即可，不会出现空隙或溢出。
如果不需要严格的最大边长，也可以自定义最小边长阈值，比如设置squareSize不小于20px，避免方块过碎。

方案2：纯CSS Grid简化实现 #

如果不需要严格的边长整除适配，只是近似铺满，可使用纯CSS方案实现，代码更轻量：

/* 基础样式重置同上 */
.square-wrap {
  width: 100vw;
  height: 100vh;
  display: grid;
  /* 自动填充列，最小边长50px可自行调整 */
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  /* 行高等于列宽，保证正方形 */
  grid-auto-rows: 1fr;
}
.square-item {
  border: 1px solid #e5e5e5;
}

内容的提问来源于stack exchange，提问作者Kushal Desai