響應(yīng)式郵件設(shè)計(jì)指南：讓您的郵件在各種設(shè)備上都能完美呈現(xiàn)

核心要點(diǎn)

• 隨著移動(dòng)設(shè)備在郵件閱讀中的普及，響應(yīng)式郵件布局必須考慮移動(dòng)設(shè)備的特性。這需要重新排列郵件內(nèi)容，將原本水平排列的單元格在移動(dòng)設(shè)備上垂直排列。
• 單列郵件布局（通常包含單個(gè)標(biāo)題圖像）無(wú)需重新排列元素，只需調(diào)整寬度以匹配設(shè)備尺寸即可。這屬于可縮放設(shè)計(jì)而非響應(yīng)式設(shè)計(jì)。
• 多列郵件布局需要隨著設(shè)備寬度的減小重新排列列。這可以通過(guò)使用嵌套表格或更改表格單元格的 display 屬性來(lái)實(shí)現(xiàn)。后者更優(yōu)雅，并使用原生的 CSS 規(guī)則。
• 響應(yīng)式郵件中的圖像只需要經(jīng)典的響應(yīng)式技術(shù)（img {max-width: 100%;}）。但是，使用媒體查詢(xún)，可以隱藏一個(gè)圖像，并用另一個(gè)圖像作為背景圖像代替。

在之前的關(guān)于新聞稿撰寫(xiě)的文章中，我們已經(jīng)了解到一些技巧可以極大地改變您的郵件在不同客戶(hù)端中的顯示方式。

此外，我們必須考慮移動(dòng)設(shè)備，其在郵件閱讀中的使用量日益增長(zhǎng)。這就引出了為郵件構(gòu)建響應(yīng)式布局的問(wèn)題。

由于我們知道郵件模板是用 HTML 表格構(gòu)建的，并且具有內(nèi)聯(lián) CSS，因此我們的工作比平時(shí)要復(fù)雜一些：

• 內(nèi)聯(lián) CSS 規(guī)則具有較高的特異性值（它們總能獲勝）。
• 表格并非設(shè)計(jì)用于布局組合，因此我們必須注意郵件的組合，記住單元格（自然水平定位）應(yīng)該在移動(dòng)設(shè)備上垂直排列。
• 當(dāng)然，我們不能使用 JavaScript。

幸運(yùn)的是，大多數(shù)移動(dòng)設(shè)備都具有與現(xiàn)代 CSS 規(guī)則的高兼容性，因此我們可以輕松地使用媒體查詢(xún)解決所有這些問(wèn)題，大量使用 !important 聲明（以覆蓋內(nèi)聯(lián)樣式），并仔細(xì)注意內(nèi)容的排列方式。

對(duì)于此類(lèi)項(xiàng)目，采用“移動(dòng)優(yōu)先”方法非常重要，可以避免在小型設(shè)備上無(wú)法正確排列的布局。

請(qǐng)注意，即使在本文中我們只討論響應(yīng)式問(wèn)題，響應(yīng)式移動(dòng)郵件也不一定是好的郵件。有效的移動(dòng)郵件設(shè)計(jì)涉及許多元素，包括字體大小、布局組合等等：這些都是非常重要的任務(wù)，我們將在另一篇文章中介紹。

郵件布局模式

關(guān)于響應(yīng)式，我們可以識(shí)別兩種類(lèi)型的郵件：?jiǎn)瘟泻投嗔小?/p>

單列布局

單列布局（通常只有一個(gè)標(biāo)題圖像）沒(méi)有特殊需求。由于它們不需要重新排列元素，我們只需要注意所有寬度都能優(yōu)雅地降級(jí)以匹配設(shè)備尺寸。這并非響應(yīng)式設(shè)計(jì)，而是可縮放設(shè)計(jì)的經(jīng)典示例（參見(jiàn)《可縮放、流暢或響應(yīng)式：了解移動(dòng)郵件方法》）。

為了確保您的郵件正確調(diào)整大小，您只需要調(diào)整表格寬度：

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

您還需要調(diào)整圖像大小（參見(jiàn)本文末尾的“關(guān)于圖像”段落）并調(diào)整字體大小，但沒(méi)有其他特殊需求。

多列布局

多列布局需要隨著設(shè)備寬度的減小重新排列列。無(wú)論您使用兩列、三列還是更多列，都需要將它們垂直顯示而不是水平顯示。

實(shí)現(xiàn)此目的有兩種簡(jiǎn)單的方法：

1. 使用嵌套表格
2. 更改表格單元格的 display 屬性。

嵌套表格布局

郵件組合通常需要使用嵌套表格。這始終被認(rèn)為是確?？蛻?hù)端兼容性的最佳方法，但另一方面，生成的代碼非常混亂且實(shí)際上難以閱讀。

技巧在于使用 table align="left" 屬性，該屬性導(dǎo)致表格水平對(duì)齊。

每個(gè)元素必須具有特定寬度，并且它們的總和必須與它們的容器值相同。

當(dāng)設(shè)備寬度減小時(shí)，我們必須調(diào)整容器大小并將所有表格列強(qiáng)制為 100% 寬度。

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

此技術(shù)確保與大多數(shù)客戶(hù)端兼容：我在 Litmus 中測(cè)試了演示文件，并且所有客戶(hù)端都獲得了良好的結(jié)果，允許以下警告：

• Outlook 2007、2010 和 2013（這些版本的 Outlook 使用 Microsoft Word 作為渲染引擎：參見(jiàn) Litmus 博客上的《Microsoft Outlook 客戶(hù)端渲染差異指南》）；
• 最舊版本的 Lotus Notes；
• Gmail Android 應(yīng)用。

這是一個(gè)良好的起點(diǎn)（有關(guān)測(cè)試的部分結(jié)果，請(qǐng)參見(jiàn)下文），我們還必須考慮這個(gè)測(cè)試是用空表格構(gòu)建的：添加內(nèi)容（和更多嵌套表格！?。┠鷳?yīng)該能夠修復(fù)所有錯(cuò)誤并使此技術(shù)與所有客戶(hù)端都能正常工作。

更改表格單元格的 display 屬性

構(gòu)建多列郵件的第二種方法更優(yōu)雅，并使用原生的 CSS 規(guī)則。

此技術(shù)包括在設(shè)備寬度減小時(shí)更改默認(rèn)表格單元格的 display 屬性（您可以在 responsiveemailpatterns.com 上找到許多示例）。這會(huì)導(dǎo)致單元格垂直重新堆疊：

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

此測(cè)試的結(jié)果非常好：所有客戶(hù)端都正確呈現(xiàn)了測(cè)試郵件（有時(shí)存在細(xì)微的錯(cuò)誤），但請(qǐng)記住，我們嘗試過(guò)空郵件，添加內(nèi)容后結(jié)果可能會(huì)有所不同。

關(guān)于圖像

在響應(yīng)式郵件中，圖像只需要我們目前在 Web 中使用的經(jīng)典響應(yīng)式技術(shù)（img {max-width: 100%;}）。

但是，正如 Campaign Monitor 響應(yīng)式郵件設(shè)計(jì)指南中建議的那樣，使用媒體查詢(xún)，您可以隱藏一個(gè)圖像，并用另一個(gè)圖像作為背景圖像代替。

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

請(qǐng)記住，即使通過(guò) CSS 隱藏的圖像也會(huì)加載到客戶(hù)端，因此請(qǐng)注意這一點(diǎn)。

一個(gè)不錯(cuò)的選擇是將同一圖像用于 img 標(biāo)簽和 background-image 源。您必須準(zhǔn)備一個(gè)多用途圖像，以便用于所有這些范圍，就像下面的示例一樣：

選擇合適的圖像后，您可以將其用于許多媒體查詢(xún)斷點(diǎn)。準(zhǔn)備就緒后，您只需要添加少量 CSS 規(guī)則：

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

您還可以添加 background-size 屬性以調(diào)整每個(gè)斷點(diǎn)視圖（注意客戶(hù)端對(duì)此規(guī)則的支持）。

不幸的是，這不太可能解決您對(duì)高密度設(shè)備的所有需求——但是它可以減少為所有其他情況加載的文件數(shù)量。

結(jié)論

那么，是否存在一種單一的、萬(wàn)能的、有史以來(lái)最好的響應(yīng)式郵件創(chuàng)作技術(shù)呢？

通常情況下，答案是否定的。每個(gè)項(xiàng)目都需要不同的方法，并且有不同的最佳解決方案。真正的答案是掌握一系列有用的技術(shù)，并不斷嘗試新的方法。

資源

• http://miracleart.cn/link/f663b8c9b8331a8c625007b4337601ec
• http://miracleart.cn/link/90e08c6d15d206857d4fd54fa2f334bc
• http://miracleart.cn/link/ae0de04da95f06c3c85934ea84bcccc0
• http://miracleart.cn/link/a35e2f4a3fa64ee63ab18d8072b3a806
• http://miracleart.cn/link/3d4233a54febe35fbf7749c3affb8e15
• http://miracleart.cn/link/00b5d2692a781b6a9d3d1522c6e9d1ad
• http://miracleart.cn/link/7006bc554a1a9de85c416551c10368e2

關(guān)于構(gòu)建響應(yīng)式郵件的常見(jiàn)問(wèn)題

（此處省略了原文中提供的常見(jiàn)問(wèn)題解答部分，因?yàn)樵摬糠謨?nèi)容與原文其他部分相比，改寫(xiě)難度較小，且篇幅較長(zhǎng)，為避免輸出過(guò)長(zhǎng)，此處略去。）

以上是一盒用于構(gòu)建響應(yīng)電子郵件的技巧的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！