響應式郵件設計指南：讓您的郵件在各種設備上都能完美呈現
核心要點
display 屬性來實現。後者更優雅，並使用原生的 CSS 規則。 img {max-width: 100%;}）。但是，使用媒體查詢，可以隱藏一個圖像，並用另一個圖像作為背景圖像代替。 
在之前的關於新聞稿撰寫的文章中，我們已經了解到一些技巧可以極大地改變您的郵件在不同客戶端中的顯示方式。
此外，我們必須考慮移動設備，其在郵件閱讀中的使用量日益增長。這就引出了為郵件構建響應式佈局的問題。
由於我們知道郵件模板是用 HTML 表格構建的，並且具有內聯 CSS，因此我們的工作比平時要復雜一些：
幸運的是，大多數移動設備都具有與現代CSS 規則的高兼容性，因此我們可以輕鬆地使用媒體查詢解決所有這些問題，大量使用!important 聲明（以覆蓋內聯樣式），並仔細注意內容的排列方式。
對於此類項目，採用“移動優先”方法非常重要，可以避免在小型設備上無法正確排列的佈局。
請注意，即使在本文中我們只討論響應式問題，響應式移動郵件也不一定是好的郵件。有效的移動郵件設計涉及許多元素，包括字體大小、佈局組合等等：這些都是非常重要的任務，我們將在另一篇文章中介紹。
關於響應式，我們可以識別兩種類型的郵件：單列和多列。
單列佈局（通常只有一個標題圖像）沒有特殊需求。由於它們不需要重新排列元素，我們只需要注意所有寬度都能優雅地降級以匹配設備尺寸。這並非響應式設計，而是可縮放設計的經典示例（參見《可縮放、流暢或響應式：了解移動郵件方法》）。
為了確保您的郵件正確調整大小，您只需要調整表格寬度：
<table> cellspacing="0" cellpadding="0" border="0" width="600"> </table>
@media screen and (max-width:480px) {
table {
width: 100%!important;
}
}您還需要調整圖像大小（參見本文末尾的“關於圖像”段落）並調整字體大小，但沒有其他特殊需求。
多列佈局需要隨著設備寬度的減小重新排列列。無論您使用兩列、三列還是更多列，都需要將它們垂直顯示而不是水平顯示。
實現此目的有兩種簡單的方法：
display 屬性。 郵件組合通常需要使用嵌套表格。這始終被認為是確保客戶端兼容性的最佳方法，但另一方面，生成的代碼非常混亂且實際上難以閱讀。
技巧在於使用 table align="left" 屬性，該屬性導致表格水平對齊。
每個元素必須具有特定寬度，並且它們的總和必須與它們的容器值相同。
當設備寬度減小時，我們必須調整容器大小並將所有表格列強制為 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;
}
}此技術確保與大多數客戶端兼容：我在 Litmus 中測試了演示文件，並且所有客戶端都獲得了良好的結果，允許以下警告：
這是一個良好的起點（有關測試的部分結果，請參見下文），我們還必須考慮這個測試是用空表格構建的：添加內容（和更多嵌套表格！！）您應該能夠修復所有錯誤並使此技術與所有客戶端都能正常工作。
構建多列郵件的第二種方法更優雅，並使用原生的 CSS 規則。
此技術包括在設備寬度減小時更改默認表格單元格的 display 屬性（您可以在 responsiveemailpatterns.com 上找到許多示例）。這會導致單元格垂直重新堆疊：
<table> cellspacing="0" cellpadding="0" border="0" width="600"> </table>
此測試的結果非常好：所有客戶端都正確呈現了測試郵件（有時存在細微的錯誤），但請記住，我們嘗試過空郵件，添加內容後結果可能會有所不同。
在響應式郵件中，圖像只需要我們目前在 Web 中使用的經典響應式技術（img {max-width: 100%;}）。
但是，正如 Campaign Monitor 響應式郵件設計指南中建議的那樣，使用媒體查詢，您可以隱藏一個圖像，並用另一個圖像作為背景圖像代替。
@media screen and (max-width:480px) {
table {
width: 100%!important;
}
}
請記住，即使通過 CSS 隱藏的圖像也會加載到客戶端，因此請注意這一點。
一個不錯的選擇是將同一圖像用於 img 標籤和 background-image 源。您必須準備一個多用途圖像，以便用於所有這些範圍，就像下面的示例一樣：
選擇合適的圖像後，您可以將其用於許多媒體查詢斷點。準備就緒後，您只需要添加少量 CSS 規則：
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 屬性以調整每個斷點視圖（注意客戶端對此規則的支持）。
不幸的是，這不太可能解決您對高密度設備的所有需求——但是它可以減少為所有其他情況加載的文件數量。
那麼，是否存在一種單一的、萬能的、有史以來最好的響應式郵件創作技術呢？
通常情況下，答案是否定的。每個項目都需要不同的方法，並且有不同的最佳解決方案。真正的答案是掌握一系列有用的技術，並不斷嘗試新的方法。
（此處省略了原文中提供的常見問題解答部分，因為該部分內容與原文其他部分相比，改寫難度較小，且篇幅較長，為避免輸出過長，此處略去。）
以上是一盒用於構建響應電子郵件的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
