如何在 Astra 中更新 Tablet+Mobile 的响应断点?

以前在 Astra 中,我们有默认断点,即 544 用于移动设备,768 用于平板设备。在 Astra v2.4.0中,我们提供了在 Astra 中设置响应断点并将它们与您的页面构建器匹配的功能。

默认断点 –

  • 移动断点 – 现有的和新的 – 544px 都是一样的。
  • 平板电脑断点 – 768(现有) – 921(新断点)

为什么?

  • 一些用户需要不同的断点。假设您正在使用页面构建器构建您的网站,并且页面构建器具有不同的断点(而不是 544 和 768 )。
  • 当使用 921px 处的断点创建菜单时,我们的菜单在其下方变为汉堡菜单,因此通常此设备的颜色应呈现为平板电脑,但在这种情况下,颜色是从桌面继承的。因为在此版本之前,我们为平板电脑设置了 768px 的默认断点。此版本已解决此方案。

因此,从Astra v2.4.0更新开始,您可以根据页面构建器的断点更改 Astra 主题的平板电脑和移动设备断点。

解决方案!

在我们的 Astra v2.4.0中,我们为新用户引入了新断点,平板电脑 = 921px,移动设备 = 544px。

这对现有用户意味着什么,站点或任何更改都不会受到影响,他们的断点将是 768px 和 544px,因为它工作。

如果现有用户想用一些不同的断点更新他们的默认断点,他们可以使用以下过滤器 –

我们引入了两个新的过滤器来更改手机和平板电脑的断点编号。

要更改移动断点:

// 在下面更新你的自定义移动断点 - 比如 return 544;
add_filter('astra_mobile_breakpoint',函数(){
    返回 544;
});

要更改平板电脑断点:

// 在下面更新您的自定义平板电脑断点 - 比如 return 921;
add_filter('astra_tablet_breakpoint', function() {
    返回 921;
});

注意:按照本文中的步骤使用子主题或其他提到的方法添加上述过滤器或任何自定义代码。

对于现有用户,我们建议请为“astra_tablet_breakpoint”和主菜单 > 菜单断点使用相同的断点值。因此,当您的菜单显示汉堡菜单时,它将加载两者的平板电脑设置(即定制器设置和 CSS 样式)。


您是否在 RTL 就绪网站上面临风格问题?
=> 我们建议访问 Astra 选项页面并刷新页面以解决样式问题。或者,如果启用了CSS 文件生成,请尝试刷新设置。

推荐:拥有Astra 主题Astra Pro Addon的最新版本,即2.4.0 及更高版本。

Powered by BetterDocs

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top