移动端通过设置内边距替代隐藏Wrapper的媒体查询失效问题

我最近在搞MJML邮件开发时碰到个小难题：想在移动端让某个wrapper实现视觉上的“隐藏”，但不是真的把它藏起来，而是把内边距设为0。我一开始想到用媒体查询来写样式，但试了好几次都没生效，先把我写的代码贴出来：

我写的媒体查询样式代码 #

<mj-head>
  <mj-style>
    .wrapper-fix div {
      padding: 0px 50px !important;
    }
    @media only screen and (max-width: 480px){
      .wrapper-fix div {
        padding: 0px 0px !important;
      }
    }
  </mj-style>
</mj-head>

对应的wrapper代码示例 #

<mj-wrapper class="wrapper-fix">
  <!-- 内部内容 -->
</mj-wrapper>

折腾了半天发现，问题出在MJML的样式优先级上——它会自动给组件生成内联样式，普通的类选择器加!important有时候还是干不过这些内联样式。给你几个亲测有效的解决方案：

方案一：精准选中MJML生成的wrapper元素 #

MJML编译后会把<mj-wrapper>转换成带特定类的<div>（比如mj-wrapper），我们可以把选择器写得更精准，直接命中这个元素：

<mj-head>
  <mj-style>
    .wrapper-fix .mj-wrapper {
      padding: 0 50px !important;
    }
    @media only screen and (max-width: 480px){
      .wrapper-fix .mj-wrapper {
        padding: 0 !important;
      }
    }
  </mj-style>
</mj-head>

方案二：用MJML自带的响应式属性（推荐） #

其实MJML本身就支持给组件设置响应式的内边距，完全不用写自定义CSS。直接给<mj-wrapper>加上padding和mobile-padding属性就行：

<mj-wrapper padding="50px" mobile-padding="0">
  <!-- 内部内容 -->
</mj-wrapper>

这种写法是MJML官方推荐的，它会自动处理样式优先级，比自己写媒体查询靠谱多了。

方案三：用更具体的选择器提升优先级 #

如果还是想坚持用自定义CSS，试试把选择器写得更具体，比如结合父元素的标签和类：

<mj-head>
  <mj-style>
    div.wrapper-fix > div {
      padding: 0 50px !important;
    }
    @media only screen and (max-width: 480px){
      div.wrapper-fix > div {
        padding: 0 !important;
      }
    }
  </mj-style>
</mj-head>

更具体的选择器能让你的样式优先级超过MJML生成的内联样式，这样媒体查询就能生效了。

内容的提问来源于stack exchange，提问作者Marcus Persson