响应式电子邮件：移动设备的反向块堆叠设计

Question

所以问题的本质：我怎样才能让移动设备的块以相反的顺序堆叠？一些插图：

全宽设计示例

移动设计示例和需要的更改

我为此使用了 mjml 电子邮件框架：

<mjml version="3.3.3"><mj-body background-color="#ffffff">
<mj-section background-color="SILVER" text-align="center" vertical-align="middle"  padding="40px 0 25px">
  <mj-column width="50%" align="middle" >
    <mj-image align="middle" src="https://bellard.org/bpg/2.png" target="_blank" width="121px"></mj-image>
  </mj-column>
  <mj-column background-color="SILVER" width="50%">
    <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
        Text Block1
    </mj-text>
  </mj-column>
</mj-section>
<mj-section background-color="#ffffff" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
  <mj-column background-color="#ffffff" width="50%">
    <mj-text  background-color="#ffffff" align="middle" color="black" font-size="22px" font-weight="bold">
        Text Block2
        </mj-text>
  </mj-column>
  <mj-column width="50%" align="middle" >
    <mj-image align="middle" src="https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046" target="_blank" width="121px"></mj-image>
  </mj-column> 
</mj-section>    
<mj-section background-color="SILVER" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
  <mj-column width="50%" align="middle" >
    <mj-image align="middle" src="https://www.axialis.com/tutorials/sample/logo-ps.png" target="_blank" width="121px"></mj-image>
  </mj-column>
  <mj-column background-color="SILVER" width="50%">
    <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
        Text Block3
    </mj-text>
  </mj-column>
</mj-section>

纯 HTML 因为可以在右上角的 "View HTML" 选项卡中查看 https://mjml.io/try-it-live/SJxb4Lo4m。

在此先感谢您的帮助！

Answer 1

以下代码完全符合您的要求！我刚刚在您的代码的第 2 部分添加了 "direction" 属性，我们希望在其中更改显示方向。

<mjml version="3.3.3">
  <mj-body background-color="#ffffff">
    <mj-section background-color="SILVER" text-align="center" vertical-align="middle"  padding="40px 0 25px">
      <mj-column width="50%" align="middle" >
        <mj-image align="middle" src="https://bellard.org/bpg/2.png" target="_blank" width="121px"></mj-image>
      </mj-column>
      <mj-column background-color="SILVER" width="50%">
        <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
            Text Block1
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle" direction="rtl" >
      
      <mj-column width="50%" align="middle" direction="ltr" >
        <mj-image align="middle" src="https://vignette.wikia.nocookie.net/arianagrande/images/7/70/Example.png/revision/latest?cb=20160301231046" target="_blank" width="121px"></mj-image>
      </mj-column> 
      <mj-column background-color="#ffffff" width="50%" direction="ltr">
        <mj-text  background-color="#ffffff" align="middle" color="black" font-size="22px" font-weight="bold">
            Text Block2
            </mj-text>
      </mj-column>
    </mj-section>    
    <mj-section background-color="SILVER" background-repeat="repeat" padding="40px 0 25px" text-align="center" vertical-align="middle">
      <mj-column width="50%" align="middle" >
        <mj-image align="middle" src="https://www.axialis.com/tutorials/sample/logo-ps.png" target="_blank" width="121px"></mj-image>
      </mj-column>
      <mj-column background-color="SILVER" width="50%">
        <mj-text  background-color="SILVER" align="middle" color="#ffffff" font-size="22px" font-weight="bold">
            Text Block3
        </mj-text>
      </mj-column>
    </mj-section>    
  </mj-body>
</mjml>

响应式电子邮件：移动设备的反向块堆叠设计

Responsive email: reverse block stacking design for mobile

html

responsive-design

html-email

mjml

responsive-emails