HTML響應式電子郵件：台式機/平板電腦的3列布局到電話的2列布局

Question

嘗試創建具有響應性的HTML電子郵件，該電子郵件具有用於桌面/平板電腦的3列（多行）布局，並更改為使用表格（ <table> <tr> <td> ）用於電話顯示的2列（多行）。 我只在線找到了從大型設備的多列布局到主要使用表的單列小型設備布局的解決方案。 如何編碼這種布局的最佳策略是什么？ 我嘗試引用主要來自Mailchimp，Campaign Monitor和Litmus的資源。

下面的代碼從3列（大屏幕）到1列（電話屏幕）

鏈接到代碼： https : //github.com/alexwang949/html-sensitive-email/blob/master/tables.html

Answer 1

您可能需要采用的方法就是所謂的“混合”電子郵件構建。

基本思想是先為移動設備構建，因為Android越來越流行的Gmail客戶端根本不支持樣式標簽（因此也不支持媒體查詢）。 然后，使用廣泛支持的現代CSS為Webmail客戶端，Thunderbird和Apple客戶端構建列。 最后，使用特定於Outlook的注釋來創建“重影列”（例如），以使Outlook客戶端處於良好狀態。 注意：僅當您的電子郵件提供商沒有在發送中刪除注釋時，此步驟才有效。

這是一個耗時的過程，需要一些策略，但是最終，這種分層方法將產生結果，這就是電子郵件游戲的名稱。

這里有一篇很棒的文章： http : //webdesign.tutsplus.com/tutorials/creating-a-future-proof-respond-email-without-media-queries--cms-23919