基于屏幕宽度实现div自适应缩放的问题排查

你的问题出在尺寸单位的选择和定位元素的百分比计算逻辑上，以下是可行的解决方案：

核心修改：使用视口宽度单位（vw） #

vw单位直接关联视口宽度，1vw等于屏幕宽度的1%，能让元素随屏幕宽度成比例缩放。同时可以搭配max-width/max-height限制元素的最大尺寸，避免在大屏幕上过度放大。

修改后的CSS代码：

.sign_logo {
  position: absolute;
  top: 6.2rem;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(200, 0, 50);
  /* 补充display:flex，否则justify-content和align-items不生效 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5%;
  /* 用vw实现宽度响应式缩放 */
  width: 25vw;
  height: 25vw;
  /* 限制最大尺寸，保持原设计的最大大小 */
  max-width: 12rem;
  max-height: 12rem;
  border-radius: 50%;
}

为什么之前的方法无效？ #

• rem单位：如果根元素（<html>）的font-size是固定值（比如默认的16px），12rem就是固定的192px，不会随屏幕宽度变化。除非你给根元素设置响应式字体大小，但用vw更直接。
• 百分比单位：绝对定位元素的百分比尺寸是相对于最近的position不为static的祖先元素计算的。如果你的父元素（比如<body>）没有设置明确的宽度，百分比就无法生效。
• vh单位：vh是视口高度的百分比，和屏幕宽度无关，所以宽度缩小时元素尺寸不会跟着变。

内容的提问来源于stack exchange，提问作者Thor The dog