所以我的页面在桌面上看起来很好，但当我通过任何其他设备（手机，平板电脑）查看它时，页面上的文字已经降低到其他内容。是否有办法使文本像图像一样缩小？
这是我的HTML：
<div class="hero">
<img src="resources/assets/home_header.png" alt="youth futures header"/>
<div class="text">
<h1>Hi</h1>
<p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p>
</div>
</div>
这是CSS：
.hero {
width:1280px;
margin:0rem auto;
position: relative;
}
.text {
position: absolute;
top:50%;
left:0;
padding:1rem;
transform:translateY(-50%);
text-align:center !important;
margin: 0px 197px 103px 531px;
}