Html 如何在桌面和移动设备上使图像中的文本动态

基本上我有这样的形象：

这项任务是使文本具有动态性，以便对其进行更改，并使其对移动设备做出响应。我还没有尝试过任何东西，因为我不知道从哪里开始

Write **Media Query** click below link for better understanding.

范例

/* Mobile Styles */
@media only screen and (max-width: 400px) {
 body {
   /* Change the alignment Here (**Write css** here for Mobile)*/
 }
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
 body {
   /* Change the alignment Here (**Write css** here for Tablet)*/
 }
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
 body {
   /* Change the alignment Here (**Write css** here for Desktop)*/
 }
}

---

我假设你的意思是文本本身，而不是容器的黑色背景，需要是动态的，正如你所说的——这意味着它将是可编辑的，并且它还将响应屏幕尺寸。如果是这样的话，你必须准确地定义图像的处理方式：不管屏幕大小，它是否总是具有相同的精确大小或比例？或者允许进行一定量的裁剪或重新调整尺寸？注意，你必须先定义容器和图像的相互关系，然后才能确定如何放置文本。谢谢你回答我的问题，我最终使用了WordPress和element或，我还使用了媒体查询，所以我接受这个答案。