編碼所有電子郵件客戶端的電子郵件

使用的編碼方法：Hybrid / Spongy

div 不能在電子郵件中使用，這一直是一個神話。有一些電子郵件客戶端（不像 outlook）可以正確地渲染 div。下面的示例將說明如何編碼可以在 Gmail 應用程式（尚未推出更新），三星裝置和其他不讀取媒體查詢的電子郵件客戶端上執行的電子郵件。

介紹 Outlook 條件語句

Outlook 條件語句在呈現電子郵件或顯示特定內容（如 Outlook 的後退）時非常有用。

<!--[if (gte mso 9)|(IE)]>
<![endif]-->

上面的程式碼讀取大於 microsoft outlook 9 或 IE

Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15

列出的條件語句的版本。

啟動混合電子郵件模板

每個步驟的解釋方式都應該讓具有基本 HTML 知識的任何人都能輕鬆理解。

首先，我們從一個包裝表開始，它將跨越螢幕和一類容器。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[CONTENT GOES HERE]</td>
    </tr>
  </tbody>
</table>

之後，我們為不讀取最大寬度但讀取標題中的 CSS 的電子郵件客戶端新增媒體查詢。媒體查詢將以所有螢幕為目標，並以 700 畫素寬度顯示容器。

@media only screen and (max-width : 700px) {
.container{width:700px;}
}

接下來，我們新增一個 outlook 條件語句，使表（帶有類容器）的寬度保持在 700 畫素。

<!--[if (gte mso 9)|(IE)]>
    <table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="left" valign="top" width="700">
    <![endif]-->
    
        <table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
              <tbody>
                <tr>
                  <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
                </tr>
              </tbody>
        </table>

    <!--[if (gte mso 9)|(IE)]>
            </td>
        </tr>
    </table>
<![endif]-->

上面的程式碼現在應該在 outlook 中儲存 700px 寬的模板。

現在為列。下面的程式碼將在模板上建立兩個相等的列，寬度為 350px。

<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>
                                  
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->

<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>

 <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

在此之後，限制只是你的想象力或設計師。設計完成後，重要的是參與線框架階段，因此一旦設計處於編碼階段就沒有意外。

注意：

• 視網膜影象需要在元素級別設定的影象而不是其樣式<img src =“”width =“”…
• 你仍然可以選擇進行內聯 CSS，或者只有當所有客戶端都支援 CSS 時才能選擇 CSS。