html - 随着视口(viewport)高度的降低，垂直对齐的文本聚集在一起

Question

https://codepen.io/anon/pen/vmYZoJ

使用基础 CSS 框架

制作着陆页

着陆页是任何设备的 100% 高度:即:html、正文、着陆页高度:100%

在着陆页中添加了文本

文本垂直居中 position: absolute with top: %;

问题:随着视口(viewport)的高度变小，我的文字变得拥挤。

我的目标是拥有一个适用于所有高度和宽度的响应式着陆页

我的解决方案是什么？:当文本聚集在一起时，进行最大高度媒体查询并通过更改文本的 top: % 来重新定位文本。但问题是如果有这些分辨率的设备怎么办:

300 x 300

400 x 300

500 x 300

目前，我有一些媒体查询会随着宽度的增加而增加文本的字体大小。

[仅示例] 媒体最小宽度(40em) 媒体最小宽度(100em)

但是如果设备宽度增加而高度保持不变怎么办？这会使我的文本重叠，因为字体大小变大但高度仍然相同。

 <!-- Background --> 
 <div class="row column landing-bg">

    <!-- Info -->
     <h2 class="name">John Star</h2>
     <h3 class="role">Web Developer</h3>
    <!-- Info --> 

 </div>
 <!-- Background --> 

/************************************
Global
************************************/

html, body {
    height: 100%;
    width: 100%;
}
.row {
    max-width: none;
}

/************************************
LANDING PAGE
************************************/

/* Background */
.landing-bg {
    height: 100%;
    width: 100%;
    padding: 0;
    background: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/KADOHF81P4.jpg");
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: 0 70%;
    background-repeat: no-repeat;
}

/* Info */
.name, .role {
    width: 100%;
    position: absolute;
    text-transform: uppercase;
    text-align: center;
}
.name {
    top: 45%;
    color: #fff;
    letter-spacing: 0.7rem;
}
.role {
    top: 53%;
    color: #3687be;
    font-weight: 400;
    font-family: monospace;
}

Answer 1

将文本包裹在绝对定位的 div 中，而不是绝对定位 h2 和 h3 标签。检查一下:

 <div class="row column landing-bg">

    <!-- Info -->
 <div class="bishment">
       <h2 class="name">John Star</h2>
       <h3 class="role">Web Developer</h3>
 </div>
    <!-- Info --> 

 </div>



.bishment {
  width:100%;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

}

https://codepen.io/anon/pen/VbwMLE