如何創建響應式電子郵件模板？

我可以使用媒體查詢構建響應式佈局，但這些樣式只能在外部/內部CSS中編寫。電子郵件模板我們不能使用DIV和外部/內部CSS。如何構建響應式電子郵件模板？

感謝， Shanid

2013-08-29 shanidkv

你要明白，響應電子郵件，而可能的，不能每個郵件客戶端上工作。例如，Gmail會從電子郵件中刪除所有頭標，因此不允許媒體查詢，因此無響應。根據我測試的結果，可以在Outlook，Apple Mail和其他一些標準媒體查詢中顯示響應式電子郵件。對於那些，你必須使用典型的斷點並將它們應用於trs或tds。現在，這可能會很棘手。您必須確保它不會破壞您的表格佈局，因此您需要事先計劃佈局中的變化。

如果你希望它主要用於所有事情，我建議你使用流體佈局使用％寬度。但是，如果您真的想要一些網站響應能力，那麼它與任何響應式網站都是一樣的。請注意，它無處不在。就像這樣：

@media (max-width:680px) { 
.hide { display:none; } 
.main { width:440px } 
.header { width:440px; } 
.header-img { width:440px } 
.footer { width:440px; } 
.footer-size { width:440px; } 
} 

@media (max-width:440px) { 
.hide { display:none; } 
.main { width:100% } 
.header { width:100%; } 
.header-img { width:100%; height:auto; } 
.logo-img { width:75px; height:30px; } 
.icon-img { width:19px; height:18px; } 
.icon-wrap { width:19px; } 
.footer { display:none !important; } 
.footer-size { width:100% } 
} 

@media (max-width:240px) { 
.hide { display:none; } 
.main { width:100% } 
.header { width:100%; } 
.header-img { width:100%; height:auto; } 
.logo-img { width:75px; height:30px; } 
.icon-img { width:19px; height:18px; } 
.icon-wrap { width:19px; } 
.button { width:100%; height:auto; } 
.footer { display:none !important; } 
.footer-size { width:100% } 
}

（這只是從電子郵件活動我工作的一些代碼，順便說一句）

來源

2013-08-29 14:52:17

你好R拉科恩，謝謝你的回答。 http://zurb.com/playground/responsive-email-templates這裏我可以看到很多響應式佈局。但是當我在郵件中使用這些佈局時沒有獲得響應式風格。 – shanidkv

就像我說過的，並非每個郵件客戶端都可以顯示響應式郵件。如果你在gmail中檢查你的響應模板，它不會觸發斷點。如果您想確保您的響應斷點正常工作，請確保您檢查Outlook.com或Apple Mail中的電子郵件。 –

您可以使用常見的mailclients媒體查詢。 Web客戶端嚴重依賴於內聯css。儘可能在表格上使用盡可能多的百分比（100％），對於可能無法縮放比一定數量的像素更大的表格，則使用最大寬度。

100％包裝表中的嵌套表總是堆棧繼承。

來源

2013-09-02 14:32:52

在HTML電子郵件中使用媒體查詢對開發響應式HTML電子郵件來說不是一個很好的解決方案，因爲絕大多數受衆不會按照您的意圖來看待它。

Gmail不會在html電子郵件的頭部保留任何CSS。這是媒體查詢的地方，所以...不起作用。

Android支持媒體查詢，但它最多隻有bug。

開發僞響應HTML電子郵件的最佳方法是構建流暢的佈局HTML電子郵件。設計你的電子郵件（爲簡單起見）一個列的佈局。您可以開發具有多列布局的流體佈局，但它可能很快就會變得非常複雜。

設計你的佈局是正常的，內聯你所有的樣式和使用折舊的HTML屬性而不是CSS樣式..不管它是否內聯，CSS在HTML電子郵件中仍然無法正常播放。謹慎地使用它，如果你能避免它，根本不要使用它。

不要爲您的元素指定高度，只能以百分比值分配寬度。因此，允許設備顯示電子郵件以基於百分比值而不是特定像素大小來確定要顯示的最佳寬度。

<table width="90%" cellpadding="0" cellspacing="0" border="0">...</table>

這裏有一個流體佈局的一個很好的例子：http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347

來源

2013-12-09 01:37:06 davidcondrey

-2

ü應該先學會@media查詢。因爲有很多信息，所以在這裏寫點東西。

來源

2013-12-09 01:47:01

如何創建響應式電子郵件模板？

回答

相關問題