Question

我使用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>

Answer 1

正如您所提到的，Gmail不支持媒体查询。如果您想要进入媒体查询路线，则必须接受它不具有100％兼容性（chart）

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

IMO流体优先设计是最好的技术。它在包括Gmail在内的主要客户中得到100％的支持。如果您愿意，可以在不分割整体设计的情况下使用媒体查询调整不太重要的部分。

响应式电子邮件甚至列

1 个答案: