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

Question

我正在使用 wpbakery wordpress 插件。我在设计选项中添加了 padding 和生成的 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;
  }
}

Answer 1

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

像这样设置你的设计选项:

并在这里指定一个样式:

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

希望对您有所帮助:)