如何让元素按屏幕比例显示且支持PC端缩放

问题描述 #

用CSS实现了一个占body宽高较小值90%的正方形，尝试过vmin属性和aspect-ratio: 1，显示正常但PC端无法通过CTRL++/-快捷键同步缩放该正方形（移动端因Viewport meta标签的user-scalable="yes"可正常缩放），需优先纯CSS方案解决PC端缩放适配问题，也可接受JavaScript方案。

纯CSS解决方案（适配文本/页面缩放） #

方案1：基于em单位绑定视口尺寸

通过将根元素字体大小与视口最小值关联，用em定义正方形尺寸，可同步适配浏览器文本缩放：

html {
  font-size: calc(100vmin / 10); /* 1em = 视口最小值的10% */
  height: 100%;
  margin: 0;
}
body {
  height: 100%;
  margin: 0;
  /* 可选：居中正方形 */
  display: flex;
  align-items: center;
  justify-content: center;
}

#square {
  width: 9em;
  height: 9em;
  aspect-ratio: 1; /* 强制正方形比例，可选（因宽高已相等） */
  background-color: #C00;
}

原理：100vmin对应视口宽高的较小值，除以10后1em等价于该值的10%，9em即满足90%的需求；浏览器文本缩放时，em单位会同步跟随字体缩放比例变化，实现正方形同步缩放。

方案2：max-width+max-height+aspect-ratio组合

替代直接使用vmin，适配页面缩放场景：

html, body {
  height: 100%;
  margin: 0;
}

#square {
  max-width: 90vw;
  max-height: 90vh;
  width: 100%;
  aspect-ratio: 1;
  background-color: #C00;
  margin: auto; /* 可选：居中 */
}

原理：正方形自动取90vw和90vh中的较小值，保持正方形比例，页面缩放时会同步适配视口变化。

JavaScript解决方案（精准区分缩放与窗口Resize） #

通过监听devicePixelRatio变化区分缩放事件，动态调整正方形尺寸：

let lastScale = window.devicePixelRatio;

function adjustSquare() {
  const currentScale = window.devicePixelRatio;
  const body = document.querySelector("body");
  // 计算尺寸：body宽高较小值的90%，适配缩放比例
  const size = Math.min(body.offsetWidth, body.offsetHeight) * 0.9 / currentScale;
  const square = document.querySelector("#square");
  
  square.style.width = `${size}px`;
  square.style.height = `${size}px`;
  
  lastScale = currentScale;
}

// 监听窗口Resize和页面可见性变化（覆盖缩放触发场景）
window.addEventListener("resize", adjustSquare);
document.addEventListener("visibilitychange", adjustSquare);

// 初始加载时执行一次
adjustSquare();

原理：devicePixelRatio会随浏览器缩放比例变化，通过对比前后值可精准触发尺寸调整，确保正方形在缩放和窗口Resize时都能保持比例和占比。

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