MJML <mj-attributes> 中的响应性答案

【问题标题】：Responsiveness in MJML <mj-attributes>MJML <mj-attributes> 中的响应性
【发布时间】：2017-10-10 01:22:44
【问题描述】：

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

以上代码均无效。

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

【问题讨论】：

标签： mjml

【解决方案1】：

感谢来自 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-thumbnail mjml 组件生成的类。

【讨论】：