HTML响应式电子邮件:台式机/平板电脑的3列布局到电话的2列布局 [英] HTML Responsive Email: 3 column layout for desktop/tablet to 2 column layout for phone

问题描述

尝试创建具有响应式HTML电子邮件，该电子邮件具有用于台式机/平板电脑的3列(多行)布局，并使用表(< table> )更改为2列(多行)以用于电话显示.< tr> < td> ).我只在线找到了从大型设备的多列布局到主要使用表的单列小型设备布局的解决方案.如何编码这种布局的最佳策略是什么?我尝试引用主要来自Mailchimp，Campaign Monitor和Litmus的资源.

Trying to create a responsive HTML email that has a 3 column (multiple rows) layout for desktop/tablet and changes to 2 columns (multiple rows) for phone display using tables(<table> <tr> <td>). I've only found solutions online that go from a large device multi-column layout to a single column small device layout using mainly tables. What is the best strategy on how to code this type of layout? I've tried referencing resources mainly from Mailchimp, Campaign Monitor and Litmus.

下面的代码从3列(大屏幕)到1列(电话屏幕)

The code below goes from 3 columns (large display) to 1 column (phone display)

链接到代码: https://github.com/alexwang949/html-sensitive-email/blob/master/tables.html

推荐答案

您可能需要采用的方法就是所谓的混合"电子邮件构建.

The approach you'd likely need to take is what's becoming known as the "hybrid" email build.

基本思想是先为移动设备构建，因为Android越来越流行的Gmail客户端根本不支持样式标签(因此也不支持媒体查询).然后，使用广泛支持的现代CSS为Webmail客户端，Thunderbird和Apple客户端构建列.最后，使用特定于Outlook的注释来创建重影列"(例如)，以使Outlook客户端处于良好状态.注意:仅当您的电子邮件提供商未在发送中删除注释时，此步骤才有效.

The basic idea is to build for mobile first, as Android's increasingly popular Gmail client does not support the style tag (and thus media queries) at all. Then, use widely-supported modern CSS to build the columns for webmail clients, Thunderbird and Apple clients. Finally, use Outlook-specific comments to create "ghost columns" (for example) to whip Outlook clients into shape. Note: this step only works if your email provider doesn't strip out comments on send.

这是一个耗时的过程，需要一些策略，但是最终，这种分层方法将产生结果，这就是电子邮件游戏的名字.

It's a time-consuming process requiring some strategy, but ultimately this layered approach will yield results, which is the name of the email game.

这里有一篇很棒的文章: http://webdesign.tutsplus.com/tutorials/创建没有媒体查询的未来证明响应电子邮件--cms-23919

There's a fantastic article about this here: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

这篇关于HTML响应式电子邮件:台式机/平板电脑的3列布局到电话的2列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！