Elementor中的自适应文本大小,图像大小和布局

时间:2020-06-03 23:15:14

标签: wordpress responsive-design elementor

我有三个独立的问题。我正在使用Hello主题。我正在使用画布。以下三个问题都是相关的。

问题1 –大众文本编辑器大小

我对大众汽车的“文本编辑器”的大小有疑问。让我开始我的目标:

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

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

我该如何解决?

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

问题2 –图片大小

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

问题3-布局

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

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

我将使用单列,全高(适合屏幕)和左右文本的自定义绝对位置。我希望此布局具有响应性,以便在桌面浏览器窗口缩小时,文本也一样,但是文本保留在同一位置。

我非常感谢您的所有帮助!

1 个答案:

答案 0 :(得分:0)

正如您所提到的,您正在使用elementor,您可以轻松实现。 让我来帮助您解决这个问题: 问题1的解决方案: 在Elementor中,您可以设置每个设备的字体大小。例如,您在台式机上使用14 PX,而没有为平板电脑和移动设备设置字体大小,因此在手机和平​​板电脑上,它也会显示14px。 将模式设置为平板电脑。然后转到样式>印刷>大小。设置平板电脑的尺寸。在移动设备上也是如此。

问题2的解决方案: 尝试为图片使用自定义尺寸,这样不会增加宽度。

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

相关问题