登录页面拉伸后显示怪异过大，寻求前端适配修复帮助

云原生阿岚

2026-7-27

问题分析与解决

你的问题出在容器的尺寸单位设置上：

你用了vw（视口宽度百分比）作为容器的宽高单位，当窗口被拉伸变宽时，50vw会跟着视口宽度同步放大，直接导致容器变得过大
max-width:100vh在宽屏场景下（视口宽度远大于高度），100vh的数值远小于50vw，根本起不到限制宽度的作用

修复方案

修改.square的CSS样式，改用固定最大尺寸配合相对单位，同时优化居中逻辑：

方案一：保留绝对定位的调整

.square {
  border-radius: 10px;
  /* 用百分比适配小屏幕，限制最大宽度匹配期望样式 */
  width: 90%;
  max-width: 400px;
  /* 让高度自适应内容，或设置最小高度保证布局 */
  height: auto;
  min-height: 500px;
  position: absolute;
  margin: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

方案二：更稳定的Flex布局居中（推荐）

body {
  margin: 0;
  min-height: 100vh;
  /* 用flex实现页面水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.square {
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
  min-height: 500px;
  background: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}