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

Question

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

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

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

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

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

我怎样才能解决这个问题？

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

问题 2 – 图像尺寸

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

问题 3 - 布局

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

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

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

我非常感谢您的任何帮助！

标签： wordpressresponsive-designelementor

Answer 1

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

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

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