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;
   }
}

以上代码均无效。

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

Answer 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组件生成的类。

MJML中的响应性<mj-attributes>

1 个答案: