响应式固定<h1>与背景图比例失调问题求助

核心问题分析 #

你当前用固定百分比的margin-top定位文本，但纯文本字体大小未随视口同步缩放，且margin的百分比基于父容器宽度计算，和背景图高度比例不匹配，导致缩放后错位；而PNG文本是基于自身尺寸缩放，能和背景图保持比例。

可行解决方案 #

1. 用视口单位（vw/vh）统一控制尺寸与定位 #

视口单位直接基于浏览器窗口尺寸，能让文本大小和位置完全跟随背景图比例变化：

/* 背景容器占满视口宽度 */
#r_bg-img {
  width: 100%;
  position: relative;
}
#r_bg-img img {
  width: 100%;
  display: block; /* 消除图片下方间隙 */
}

/* 内容容器绝对定位，覆盖背景图 */
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

h1.title.s1 {
  color: rgb(60, 255, 0);
  position: absolute;
  top: 34.5vh; /* 基于视口高度定位，匹配背景图比例 */
  margin: 0;
  width: 74.5%;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  text-align: center;
  font-size: 3vw; /* 字体随视口宽度缩放 */
}

2. 将背景图设为容器背景，用百分比定位 #

把背景图作为容器背景，用padding-top维持背景图比例，再用百分比定位文本：

#r_bg-img {
  width: 100%;
  /* 假设背景图比例为16:9，用padding-top维持比例 */
  padding-top: 56.25%; /* 9÷16=56.25% */
  background: url("/img/rokubun_background.png") no-repeat center / cover;
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

h1.title.s1 {
  color: rgb(60, 255, 0);
  position: absolute;
  top: 34.5%; /* 百分比基于容器高度，和背景图比例一致 */
  left: 50%;
  transform: translateX(-50%);
  width: 74.5%;
  text-align: center;
  margin: 0;
  font-size: 4%; /* 字体大小基于容器宽度缩放 */
}

3. 用clamp()实现精细的响应式字体大小 #

如果需要控制字体缩放的范围，用clamp()设置最小、理想、最大字体大小：

h1.title.s1 {
  /* 字体在20px到48px之间，随视口宽度自适应 */
  font-size: clamp(20px, 3vw, 48px);
}

关键注意点 #

• 确保背景容器和内容容器的尺寸比例完全匹配，避免缩放错位
• 优先用top/left替代margin定位，规避margin百分比基于宽度计算的问题
• 字体大小必须用相对单位（vw、%、clamp），不能用固定px

内容的提问来源于stack exchange，提问作者Gerard_López_garcía