响应式Flexbox布局：优化六边形网格在移动端的显示

function renderHexGrid() {
  let hexArray = [
    ['v', 'v', 'v', '_', '_', '_', 'v', 'v', 'v'],
    ['v', '_', '_', '_', '_', '_', '_', '_', 'v'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['_', '_', '_', '_', '_', '_', '_', '_', '_'],
    ['v', 'v', '_', '_', '_', '_', '_', 'v', 'v'],
    ['v', 'v', 'v', 'v', '_', 'v', 'v', 'v', 'v']
  ]
  // 将单位变量名改为更通用的，不直接绑定vh/vw
  const hexSize = 7; // 用于宽度和高度的基础尺寸
  const hexOverlap = hexSize / 8; // 用于计算重叠部分
  const hexVerticalOffsetFactor = 0.5; // 用于计算垂直偏移

  const hexGrid = document.getElementById("hex-grid")
  for (let i = 0; i < hexArray.length; i++) {
    let hexRow = document.createElement("div")
    hexRow.style.display = "flex"
    hexRow.style.justifyContent = "center"
    // 允许flex项目换行，以防单行无法容纳所有项目
    hexRow.style.flexWrap = "wrap"; 

    for (let j = 0; j < hexArray[i].length; j++) {
      if (hexArray[i][j] != 'v') {
        let hex = document.createElement("div")
        hex.style.display = "flex";
        hex.style.justifyContent = "center"
        hex.style.alignItems = "center"

        // 核心修改：将宽度、高度、外边距和垂直偏移量都改为vw单位
        if (j % 2 == 0) {
          // 垂直偏移量也改为vw单位，与六边形尺寸保持一致
          hex.style.transform = `translateY(-${hexSize * hexVerticalOffsetFactor}vw)` 
          hex.style.backgroundColor = "red"
        } else {
          hex.style.backgroundColor = "blue"
        }
        if (i % 2 == 0) {
          hex.style.opacity = 0.5
        }
        // 使用vw单位定义高度和宽度，确保随屏幕宽度等比例缩放
        hex.style.height = `${hexSize * (Math.sqrt(3) / 2)}vw`; // 假设六边形高度与宽度有特定比例
        hex.style.width = `${hexSize}vw`; 
        // 外边距也使用vw单位
        hex.style.marginLeft = `-${hexOverlap}vw`; 
        hex.style.marginRight = `-${hexOverlap}vw`; 

        hex.textContent = i + ";" + j
        hex.style.color = "black"
        hex.style.clipPath = "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)"
        hexRow.appendChild(hex);
      }
    }
    hexGrid.appendChild(hexRow);
  }
}
renderHexGrid()

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 5%;
  width: 90%;
  min-height: 90vh;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="hex-grid"></div>