响应式电子邮件偶数列答案

【问题标题】：Responsive Email Even columns响应式电子邮件偶数列
【发布时间】：2014-05-06 17:15:50
【问题描述】：

我使用Email on Acid responsive email template 作为指导。我需要创建三列具有不同背景颜色和相等高度的文本，以响应较小的屏幕宽度。对于移动版本，列的高度应适应内容的大小。这看起来很容易通过媒体查询实现，但电子邮件设计的问题之一是 gmail 不支持媒体查询。那么除了媒体查询之外，还有什么方法可以让这些列高在桌面上也能达到，然后适应移动设备上的内容大小？

我在小提琴上放了一个代码示例。 http://jsfiddle.net/jackygrahamez/J6NLh/

样式表

.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body     {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family:sans-serif}
table {border-collapse: collapse;}

@media only screen and (max-width: 640px)  {
                body[yahoo] .deviceWidth {width:440px!important; padding:0;}
                body[yahoo] .center {text-align: center!important;}
        }

@media only screen and (max-width: 479px) {
                body[yahoo] .deviceWidth {width:280px!important; padding:0;}
                body[yahoo] .center {text-align: center!important;}
        }

HTML

<!doctype html>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family:sans-serif">

<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">


            <!-- Three Column Images -->
            <!-- 3 Small Images -->

      <table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#FFFFFF">

        <tbody>

        <tr>
          <td valign="top">

            <table width="31%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#002C53" style="margin-right:10px;">
              <tbody>
                  <tr>
                    <td height="50" style="padding:0 10px;height:50px;">
                      <p style="color:#FFFFFF;font-size:24px;line-height:0px;">
                        1
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td valign="top" style="padding:0 20px;">

                      <p style="color:#FFFFFF;">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis elit vitae felis ornare pulvinar. Sed quis sollicitudin lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec suscipit nunc quis tortor dapibus, eget ornare dolor volutpat. Duis a est sit amet urna consequat tempor sed quis justo. Nam molestie, risus sit amet dapibus molestie, augue neque posuere justo, non cursus nisl leo id quam. Maecenas luctus est non suscipit dapibus. 
                      </p>
                    </td>
                  </tr>
              </tbody>
            </table><!-- End Image 1 -->

          <table width="31%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#005E92" style="margin-right:10px;">
            <tbody>
              <tr>
                <td height="50" style="padding:0 10px;height:50px;">
                  <p style="color:#FFFFFF;font-size:24px;line-height:0px;">
                    2
                  </p>
                </td>
              </tr>
              <tr>
                <td valign="top" style="padding:0 20px;">
                  <p style="color:#FFFFFF;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed iaculis neque. Proin congue velit at justo lobortis euismod.                 
                  </p>
                </td>
              </tr>
            </tbody>
          </table><!-- End Image 2 -->


          <table width="31%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#008DCD" >
            <tbody>
              <tr>
                <td height="50" style="padding:0 10px;height:50px;">
                  <p style="color:#FFFFFF;font-size:24px;line-height:0px;">
                    3
                  </p>
                </td>
              </tr>
              <tr>
                <td valign="top" style="padding:0 20px;">
                  <p style="color:#FFFFFF;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed iaculis neque. Proin congue velit at justo lobortis euismod. Sed congue mi vel leo ornare, in accumsan enim adipiscing. Cras lobortis augue a porta ullamcorper. 

                  </p>
                </td>
              </tr>
            </tbody>
          </table>
          </td>
        </tr>
      </tbody>
    </table><!-- End Image 3 -->

    </td>
  </tr>

  <tr>
    <td><div style="height:6px">&nbsp;</div></td>
  </tr>
</tbody></table>


        </td>
    </tr>
</table>
</body>

【问题讨论】：

标签： css email layout responsive-design media-queries

【解决方案1】：

如您所述，Gmail 不支持媒体查询。如果你想走媒体查询路线，你必须接受它不会有 100% 的兼容性（chart）

还有其他几种方法可以让您的内容适合移动设备。有关详细信息，请参阅this link。这个链接是bunch of examples

IMO 流体优先设计是可用的最佳技术。它在包括 Gmail 在内的主要客户端中得到 100% 的支持。然后，如果您愿意，可以使用媒体查询调整不太重要的部分，而无需分割整体设计。

【讨论】：