如何仅用百分比测量实现正方形？JS Pong游戏球适配问题

嘿，这个问题我太熟了——做Pong这类像素风游戏时，用百分比搞正方形元素很容易踩这个坑！核心原因是CSS里的width百分比是相对于父容器的宽度，而height百分比是相对于父容器的高度，如果你的游戏容器（或者浏览器视口）不是正方形，那1.5%的宽和高自然会对应不同的像素值。另外你用固定的margin-top: -12.5px也会在不同分辨率下失效，得一起调整。

给你两个最实用的解决方案：

方案一：用视口单位vmin（纯CSS，推荐） #

vmin是CSS的视口单位，代表视口宽度（vw）和高度（vh）中较小值的1%。用它来设置球的宽高，不管视口是宽屏还是竖屏，都能保证宽高像素完全一致，完美实现正方形：

#ball {
  position: absolute;
  /* 取视口宽高中较小值的1.5%，确保宽高一致 */
  width: 1.5vmin;
  height: 1.5vmin;
  background-color: white;
  /* 用transform居中，适配所有分辨率 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这里用transform: translate(-50%, -50%)代替固定margin的原因是：这个translate的百分比是相对于元素自身的宽高，不管球的大小怎么变，都能精准居中，完全适配各种分辨率，比固定像素的margin靠谱太多。

方案二：JS动态计算（适合父容器不是视口的场景） #

如果你的游戏有固定的容器（不是直接用视口），可以用JS监听窗口大小变化，动态设置球的宽高，确保高度等于宽度：

// 初始化和窗口 resize 时调整球的大小
function adjustBallSize() {
  const ball = document.getElementById('ball');
  // 以父容器的宽度为基准计算尺寸
  const containerWidth = ball.parentElement.offsetWidth;
  const ballSize = containerWidth * 0.015;
  // 强制宽高一致
  ball.style.width = `${ballSize}px`;
  ball.style.height = `${ballSize}px`;
  // 保持居中
  ball.style.transform = `translate(-50%, -50%)`;
}

// 页面加载时执行一次
adjustBallSize();
// 监听窗口大小变化，实时调整
window.addEventListener('resize', adjustBallSize);

额外提醒 #

如果你的Pong游戏是用Canvas绘制的，那直接在Canvas里处理会更简单：计算球的尺寸时取Canvas宽高中较小值的1.5%，然后绘制正方形即可，完全不用纠结CSS的单位问题。

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