响应HTML电子邮件模板 [英] Responsive Html Email Template

问题描述

我编写的 html电子邮件应该足够好，可以在所有手机中完美呈现。我擅长编写桌面电子邮件等，这封电子邮件在所有电子邮件客户端和浏览器中都能完美呈现，但我必须使它成为手机的完美选择。我的代码结构如下：

 < table> 
< tr> 
< td width =200> < table>完成左侧表格< / table>< / td> 
< td width =200> < table>完整中间表< / table>< / td> 
< td width =200> < table>完整右表< / table>< / td> 
 
< / tr> 
< / table> 
  

为了让手机更好用我知道我需要媒体查询但不知道使用它，有人可以参考我的相关教程，可以帮助我做我的具体情况。请参阅附加图片，左边是桌面，右边是手机：

解决方案

更新：这个答案有一个大量电子邮件资源列表，包括响应式设计链接

以下是响应式设计的一些资源： b
$ b

• （滚动到底部）


• Campaign Monitor响应式指南

这是一个很好的模板，可以帮助你开始：

• 在Acid Responsive模板上发送电子邮件

I am coding html email that should be good enough to render perfectly in all mobiles. I am expert in coding emails for desktop etc. and this email renders perfectly in all email clients and browsers, but I have to make it perfect for mobiles. My code structure is as follows:

<table>
<tr>
 <td width="200"> <table>complete left table </table></td>
 <td width="200"> <table>complete middle table </table></td>
 <td width="200"> <table>complete right table </table></td>

</tr>
 </table>

To make it good for mobiles I know I will need media queries but don't know to use it, can someone refer me related tutorial that may help me to do my specific case. Please see attached image, left is for desktops, right is for Mobiles:

解决方案

Update: This answer has a big list of email resources including responsive design links

Here are some resources on responsive design:

• Litmus responsive how to guide (scroll to bottom)
• Campaign Monitor responsive guide

And here is a good template to get you started:

• Email on Acid's Responsive template

这篇关于响应HTML电子邮件模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！