如何制作具有最大宽度的流体宽度电子邮件 [英] How to make a fluid width email with a max width

问题描述

我有一个表格元素，我将把它作为电子邮件发送.

I have a table element which I'm going to send as an email.

我希望它在 Outlook 2010、Android 原生 gmail 和 android chrome 上的 gmail 上呈现.

I want it to render on outlook 2010, gmail native for android, and gmail on chrome on android.

我希望我的表格的宽度为 100%，最大为 600 像素.

I would like my table to have 100% width upto 600px.

一种解决方案是使用固定设置，并进行媒体查询.

One solution would be do with fixed settings, and have media queries.

@media screen and (max-width: 600px) {

    table[class="responsive-table"] {
        width: 100% !important;
    }
}

这在除 android 上的 chrome 上的 gmail 之外的所有其他应用中都可以正常工作，它采用 600 像素的宽度并溢出屏幕，破坏了整个布局.

This works fine in all but gmail on chrome on android, which takes the 600px width and overflows the screen, breaking the whole layout.

所以我想做一个流畅的布局，把 100% 放在表格上，并给它一个最大宽度，但现在 Outlook 不尊重最大宽度，所以它在 Outlook 中看起来太宽了.

So I thought about doing a fluid layout, and putting 100% to the table, and giving it a max-width, but now outlook does not respect max-width, so it looks too wide in outlook.

所以我不能使用流体，因为它在 Outlook 上看起来很糟糕，我不能使用固定，因为它在移动设备上的 chrome 上的 gmail 上看起来很糟糕.

So I can't use fluid because it looks bad on outlook, and I can't use fixed because it looks bad on gmail on chrome on mobile.

有什么办法可以让两者看起来都不错?这有什么技巧吗?

Is there any way I can make the look ok in both? Is there any hack for this?

推荐答案

媒体查询在 Android 和 iPhone 版 Gmail 应用中不起作用.

Media queries doesn't work in Gmail App for Android and iPhone.

这可以通过构建如下所示的基本布局来完成.

This can be done constructing basic layout shown below.

在 60 多种配置中测试，包括:

Tested in 60+ configurations, including:

• 展望 03/07/10/11/13
• iPhone 5 iOS7
• iPhone 5/6 iOS8
• Gmail 应用程序 iPhone 和安卓
• 安卓 4.4.4

<!-- wrapper -->
<table align="center" width="100%" style="width: 100%;">
  <tr>
    <!-- this cell scales automatically, don't set width on it -->
    <!-- add &nbsp; to ensure it will be rendered -->
    <td>&nbsp;</td>

    <!-- in the middle cell you set your max-width -->
    <!-- notice double declaration for yahoo in html attribute -->
    <td align="center" width="600" style="width: 600px;">

      <!-- this table scales up to parent cell -->
      <table align="center" border="0" width="100%" style="width: 100%;">
        <tr>
          <td align="center">
            <!-- content -->
          </td>
        </tr>
      </table>

    </td>

    <!-- this cell scales automatically, don't set width on it -->
    <!-- add &nbsp; to ensure it will be rendered -->
    <td>&nbsp;</td>
  </tr>
</table>

这篇关于如何制作具有最大宽度的流体宽度电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！