WpBakery (Visual Composer) - 响应式最佳实践

Posted 2023-03-06

【中文标题】WpBakery (Visual Composer) - 响应式最佳实践

【英文标题】：WpBakery (Visual Composer) - Responsive best practices

【发布时间】：2019-04-10 18:27:21

【问题描述】：

我正在使用 wpbakery wordpress 插件。我在设计选项中添加了填充，生成的 css 代码如下所示：

.vc_custom_1541499756394 
padding-top: 30px !important;
padding-right: 250px !important;
padding-left: 250px !important;

我需要在较小的屏幕尺寸上移除填充。 我的问题是，这样做的最佳做法是什么？ 像这样的简单媒体查询还是有更好的方法？

@media only screen and (max-width: 720px) 
  .vc_custom_1541499756394 
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
  

【参考方案1】：

一种更灵活的方法是删除您添加到 VC 元框的所有样式并为其分配一个类，以这种方式推送所需的样式。这样做将使您能够特定于视口，并使您能够在整个站点中重用样式。

像这样设置您的设计选项：

并在此处指定样式：

然后将所需的样式添加到类中。

希望有帮助:)

【讨论】：

我不确定这是不是“不好的做法”，但您可以通过使用课程让自己的生活更轻松。

是的，但是当在设计选项中添加时，我没有找到删除移动屏幕上的填充的方法……vc-custom 类不能被覆盖……或者我错了？

删除设计选项中的所有填充，并将其作为声明包含在您为该元素指定的类中。