HTML响应式电子邮件：台式机/平板电脑的3列布局到电话的2列布局

Question

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.

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

Link to code: https://github.com/alexwang949/html-responsive-email/blob/master/tables.html

Answer 1

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

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.

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