Elementor 中的响应式文本大小、图像大小和布局

Question

我有三个不同的问题。我正在使用你好主题。我正在使用画布。以下三个问题都是相关的。

问题 1 – VW 的文本编辑器大小

我对大众的文本编辑器大小有疑问。让我从我的目标开始：

我希望在调整桌面浏览器窗口大小时调整文本大小。例如，如果我让桌面浏览器窗口变窄，我希望字体变小但保持其段落样式。

我认为最好的方法是按 VW 调整文本大小，使文本字体与视图宽度成比例。但是，当我将浏览器的宽度设置为尽可能小时，文本字体会跳回原来的大小，并且列变得又窄又长。

我该如何解决这个问题？

参考链接：https://ibb.co/1nM7MXB

问题 2 – 图片尺寸

如果我使用的是 500 像素宽 x 600 像素高的图像。如何设置小部件，使其宽度不超过 500 像素，但在桌面浏览器窗口缩小时也能响应？我使用了“最大宽度”选项，但最大宽度与图像的实际最大宽度无关，它总是显示图像更大。

问题 3 - 布局

我正在尝试实现下面的布局（见下面的链接）

链接：https://ibb.co/ykqTYgM

我将使用单列，全高（适合屏幕），并为左侧和右侧的文本使用自定义绝对位置。我希望此布局具有响应性，以便当桌面浏览器窗口缩小时，文本也会缩小，但文本仍保留在同一位置。

非常感谢您的任何帮助！

Answer 1

正如您提到的，您使用的是elementor，您可以轻松完成。 让我帮你解决这个问题： 问题1的解决方案： 在 Elementor 中，您可以为每个设备设置字体大小。例如，您在台式机上使用 14 PX，并且没有为平板电脑和移动设备设置字体大小，所以在移动设备和平板电脑上，它也会显示 14px。 将模式设置为平板电脑。然后转到样式>排版>大小。设置平板电脑的尺寸。对移动设备也这样做。

问题 2 的解决方案： 尝试为图像使用自定义大小，它不会增加宽度。

问题 3 的解决方案： 有很多方法可以实现这一目标。使用 Z-Index 来实现这一点。首先，用图片创建 2 列。然后在下面创建一个带有文本的空白部分并将对齐设置为居中，然后使用负边距来调整它。