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>