Css 如何在一个小屏幕上使用警用机器人缩小文本大小

我试图以响应的方式将文本添加到背景图像的特定区域。我的问题是，在像213这样的小屏幕上，文本并没有减少

到目前为止，我做到了这一点

<div class="container">
    <img src="http://usefaith.voiedusucces.net/images/decoupes/who_we_are.png" alt="" class="container__background-image" />
    <div class="container__text">Who we are</div>
</div>

但是当我检查站点时，文本没有正确对齐。无论我如何缩小尺寸或尝试调整，它都不起作用。我需要将白色文本放在背景的红色部分

我需要把“我们是谁”这段文字删减到红线上

问题：

---

如何在较小的屏幕上减小文本的大小？我需要更换警察吗？

您可以通过在

vh

s或

vw

s中定义

font size

，使文本随着窗口大小自动更改大小。例如：

#mystyle p {
    font-size: 2vw;
}

您可以在此处阅读有关视口大小排版的更多信息：

编辑：然后可以使用

position:absolute

将文本与屏幕的某个角落对齐，并使用

top

和

left

属性，直到文本位于所需位置

#mystyle p {
    font-size: 2vw;
}