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

【问题标题】：How can i make the text in my image dynamic on desktop and mobile如何在桌面和移动设备上使图像中的文本动态化
【发布时间】：2019-09-12 18:53:03
【问题描述】：

基本上我有这张图片：

任务是使文本动态化，以便可以更改它并使其响应移动设备。我还没有尝试过任何东西，因为我不知道从哪里开始。

【问题讨论】：

我假设你的意思是文本本身，而不是容器（黑色背景），需要是“动态的”，正如你所说的——这意味着它是可编辑的，并且它也会响应屏幕方面。如果是这种情况，您将必须准确定义图像的处理方式：无论屏幕尺寸如何，它是否总是具有相同的确切尺寸或比例？还是允许进行一定数量的裁剪或调整大小？ IOW，您必须先定义容器和图像，然后才能确定如何放置文本。

标签： html css wordpress wordpress-theming

【解决方案1】：

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，或者我还使用了媒体查询，所以我会接受这个作为答案。