0

在使用 MJML 创建电子邮件模板时，它在电子邮件模板中提供了轮播功能。这是他们示例中的代码。（icon-width并由tb-width我添加）

<mj-carousel icon-width="30px" tb-width="20px">
   <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />
   <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" />
   <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" />
</mj-carousel>

如您所见，该属性tb-width控制轮播缩略图的宽度，我想tb-width在它进入移动屏幕时将其值更改为更小，否则我将不得不在所有屏幕尺寸上坚持一个值。

我试过这个：

@media all and (max-width: 480px) {
   [tb-width] {
      width: 50px !important;
   } // this is not working
}

然后我根据官方文档尝试了这个

@media all and (max-width: 480px) {
   div[style*="tb-width:20px;"] {
      width: 300px !important;
   }
}

以上代码均无效。

你们如何解决这个问题？提前致谢。

4

1 回答 1

0

感谢来自 mjml slack 频道的@dermothghes，这是解决方案：

所有这些 mjml 组件在输出的 HTML 中都会有一个对应的 css 类，我们需要做的是编译. 首先是mjml文件，然后从输出中找到对应的 css 类。

在我的问题中，这应该有效：

 @media all and (max-width: 480px) {
    .mj-carousel-thumbnail {
       width: 50px !important;
    }
 }

.mj-carousel-thumbnail是从mj-carousel-thumbnailmjml 组件生成的类。

于 2017-05-11T23:12:11.680 回答