如何重构着陆页以适配iPad尺寸实现响应式布局？

核心问题解决思路 #

原布局依赖固定宽高和绝对定位，导致无法适配不同屏幕尺寸。要保留原有视觉样式，需做以下调整：

• 用百分比替代固定容器宽高，让元素随父容器缩放
• 用rem替代固定字体/内边距值，保证文本在不同设备上的可读性
• 调整绝对定位元素的位置计算逻辑，改用百分比或弹性布局避免偏移
• 通过媒体查询针对iPad竖屏（768px）做细节适配

修改后的完整CSS代码 #

/* 基础设置：根字体大小16px，方便rem计算 */
html {
  font-size: 16px;
}

.landing-page {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
}

.landing-page .div {
  background-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  max-width: 1440px; /* 保留最大宽度，避免大屏拉伸过度 */
  margin: 0 auto;
}

.landing-page .overlap {
  position: absolute;
  width: 37.78%; /* 544/1440≈37.78%，对应原固定宽度 */
  height: 100vh;
  top: 0;
  left: calc(100% - 37.78%);
  background: linear-gradient(180deg, rgb(26, 179, 116) 0%, rgb(0, 122, 195) 100%);
}

.landing-page .ava-logo {
  position: absolute;
  width: 60%;
  height: 33%;
  top: 27%;
  left: 18%;
  border-radius: 50%; /* 用百分比实现圆形，避免固定值变形 */
  background: linear-gradient(180deg, rgb(26, 179, 116) 0%, rgb(0, 122, 195) 93.75%);
}

.landing-page .overlap-group {
  position: relative;
  width: 65.6%; /* 214/326≈65.6% */
  height: 61.9%; /* 210/339≈61.9% */
  top: 20.9%; /* 71/339≈20.9% */
  left: 17.2%; /* 56/326≈17.2% */
  background-image: url(./img/union.svg);
  background-size: 100% 100%;
}

.landing-page .frame {
  position: relative;
  width: 39.3%; /* 84/214≈39.3% */
  height: 40%; /* 84/210≈40% */
  top: 26.7%; /* 56/210≈26.7% */
  left: 30.4%; /* 65/214≈30.4% */
}

.landing-page .logo {
  position: absolute;
  width: 100%;
  height: 97.6%; /* 82/84≈97.6% */
  top: 1.2%; /* 1/84≈1.2% */
  left: 0;
}

.landing-page .helo-ava-label {
  position: absolute;
  width: 67.1%; /* 365/544≈67.1% */
  height: 11.6%; /* 120/1024≈11.6% */
  top: 76.8%; /* 787/1024≈76.8% */
  left: 16.9%; /* 92/544≈16.9% */
}

.landing-page .text-wrapper {
  position: absolute;
  width: 46.9%; /* 255/544≈46.9% */
  top: 13.5%; /* 138/1024≈13.5% */
  left: 25.4%; /* 138/544≈25.4% */
  font-family: "Inter", Helvetica;
  font-weight: 300;
  color: #ffffff;
  font-size: 2rem; /* 32px = 2*16px */
  letter-spacing: 0;
  line-height: normal;
}

.landing-page .register-button-wrapper {
  position: absolute;
  width: 62.22%; /* 896/1440≈62.22% */
  height: 100vh;
  top: 0;
  left: 0;
  background-image: url(./img/rectangle-64.png);
  background-size: 100% 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8%; /* 替代固定top值，用内边距控制按钮位置 */
}

.landing-page .register-button {
  display: flex;
  width: 48.1%; /* 431/896≈48.1% */
  min-height: 7.2%; /* 74/1024≈7.2% */
  align-items: center;
  justify-content: center;
  padding: 0.625rem 3.1875rem; /* 10px和51px转成rem */
  background-color: #027dbe;
  border-radius: 1.6875rem; /* 27px转成rem */
}

.landing-page .text-wrapper-2 {
  position: relative;
  width: 100%;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* iPad竖屏适配 */
@media (max-width: 768px) {
  /* 调整根字体，让文本更适配小屏 */
  html {
    font-size: 14px;
  }
  
  /* 左右区域堆叠，优先显示按钮区 */
  .landing-page .register-button-wrapper {
    width: 100%;
    height: 60vh;
  }
  
  .landing-page .overlap {
    width: 100%;
    height: 40vh;
    left: 0;
    top: 60vh;
  }
  
  /* 调整logo和文本在堆叠后的位置 */
  .landing-page .ava-logo {
    width: 40%;
    height: 60%;
    top: 20%;
    left: 30%;
  }
  
  .landing-page .text-wrapper {
    top: 10%;
    left: 25%;
    width: 50%;
    font-size: 1.8rem;
  }
  
  .landing-page .helo-ava-label {
    display: none; /* 小屏可隐藏标签，或调整大小 */
  }
}

单位选择说明 #

• 百分比：用于容器宽高和位置计算，完全基于父元素尺寸，保证布局随屏幕缩放
• rem：用于字体、内边距、圆角等，基于根字体大小，既能统一控制缩放比例，又能适配系统字体大小设置，比固定px更友好
• 保留max-width:1440px：避免大屏下布局过度拉伸，保持原设计的最佳视觉效果

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