MJML 中的响应度 <mj-attributes>

Question

使用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
}

然后我根据 official document

尝试了这个

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

None 以上代码有效。

你们是怎么解决这个问题的？提前致谢。

Answer 1

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

所有这些mjml组件在输出的HTML中都会有对应的cssclass，我们需要做的就是编译.mjml文件，从输出中找到对应的cssclass。

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

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

.mj-carousel-thumbnail 是从 mj-carousel-thumbnail mjml 组件生成的 class。

MJML 中的响应度 <mj-attributes>

Responsiveness in MJML <mj-attributes>

mjml