響應式電子郵件模板

Question

我正在研究一個電子郵件模板，其中我想爲桌面創建一個three columns grid structure，爲移動設備創建single column structure，我不想使用媒體查詢，因爲它在Android設備中不受支持。有什麼辦法可以做到這一點？

Answer 1

Anshul， 只要您使用表格堆疊而非TD堆疊，媒體查詢在Android上受支持。更多關於這裏：https://www.emailonacid.com/blog/article/email-development/how_android_is_strangling_responsive_design

你的其他選擇，這將使其工作無處不在，是利用流體混合設計：http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

Answer 2

你可以看看混合電子郵件模板。您可以查看demo here或獲取例如source code

該方法使用固定在Outlook桌面列問題ghost table。

Answer 3

如其他人所說的，你應該看看郵件設計的混合或海綿方法使用最小/最大，寬度，而不是媒體查詢來重新佈局。

我編寫並維護Cerberus templates; 混合一個實現你所問。

此模板使用一種混合的方法來重新配置 不同的屏幕尺寸爲電子郵件客戶端佈局不論媒體查詢 支持。在它的核心，它使用最大寬度和最小寬度來施加剛性的 基線（允許一些移動），並且對於戴在桌面上的前景施加固定的寬度寬度。一旦設置了移動友好型 基準，媒體查詢會逐步增強支持該基準的客戶端的電子郵件地址 。

此代碼基本上建立在Fabio Carneiro's hybrid code。他的代碼包含（相對）簡單的3 column fluid scaffold，這可能對您有所幫助。