css - h3 元素在移动设备中消失

Question

我的网页上有一个 h3 元素有问题。它在桌面上看起来还不错，但在移动设备上就消失了，如您在以下屏幕截图中所见。

h3 元素位于具有以下 css 的 div 中:

.experiental-header {
     position: absolute;
     text-align: center;
     width: 100%;
 }

并且 h3 元素具有以下 css:

.experiental-header h3 {
    margin: 0 auto;
    width: 635px;
    padding: 50px;
    background: rgba(255, 255, 255, .5);;
    text-align: center;
    }

在移动设备中:

我尝试了很多方法来解决这个问题，但没有一个效果很好，我对响应式媒体查询没有太多经验。你能帮我解决这个问题吗？谢谢!

我编辑了我的问题:现在它显示正常，但文本“Experiental”在响应模式下不会改变字体大小，如您所见:

我试过:

 font-size: 3em;

但是好像还不够。你能给些建议么？

Answer 1

在 Experimental-header h3 中应用百分比宽度。所以它在响应式中会很好地工作。

.experiental-header {
     position: absolute;
     text-align: center;
     width: 100%;
 }
.experiental-header h3 {
    margin: 0 auto;
    width: 30%;
    padding: 50px;
    background:green;
    text-align: center;
    font-size: 2.9vw;

    }

<div class="experiental-header">
  <h3>Heading-3</h3>
</div>