如何工作响应电子邮件 [英] How to work responsive email

查看：120 发布时间：2017/2/13 12:30:22 html css media-queries html-email

本文介绍了如何工作响应电子邮件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我昨天做了一篇关于这篇文章的文章。在一个答案的帮助下，我学到了一个电子邮件通讯的良好结构。我把这些在我的电子邮件通讯。我还添加了媒体查询代码。我知道，所有电子邮件客户端都不支持媒体查询。但是，谁支持，我想要一些改变与他们的布局。不幸的是，媒体查询在我的电子邮件通讯没有工作，我不明白是什么原因。这是桌面版电子邮件的视觉效果。这是移动版电子邮件的视觉效果。基本上，主要差异位于四列上。

I did a post about this yesterday. With the help of one answer, I learned the good structure for an email newsletter. I applied those on my email newsletter. I also added media query code. I know, media query is not supported in all email clients. But, Who support, I want some change with layout for them. Unfortunately, media queries haven't worked in my email newsletter, I can't understand what's the reason. This is the visual of desktop version email. This is the visual of mobile version email. Basically, main difference is on the four columns.

在移动设备上，将有两列而不是四列。

由于最后两列将放置在前两列的下面，最后两列应该与顶部有间距。因此，上面两列和下面两列的边框（垂直线）不能触摸

在桌面版本中，每个列都有border-right属性，除了最后一个。在移动设备上，第二列和第四列不应该有border-right属性。

标志下方有四列。基本上，那些是两个单独的表，每个包含两列。父表的 width =640。子表的 width =320第一个子表是 align =left被放置在一行很好。我的目的是使主表的 width =320移动，所以两个子表不能放在一行。

我为移动设备的第二个子表提供了 padding-top：20px 。

因为，第二列和最后一列没有右边界属性，我已经为移动设备调用了一个类，并给它们 border：0;

There is four columns at visual below logo. Basically, those are two separate table contains two columns each. The parent table's width="640". The child table's width="320" The first child table is align="left" So, the two child tables are placed in a row nicely. My intend is make the main table's width="320" for mobile, so the two child tables can't be placed in a row.
I've given padding-top: 20px to second child table for mobile. So, that table can get some space from above table.
As, second and last column have no right-border property, I have called a class on that for mobile and given them border: 0;

内部代码：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Email</title>
<style>
@media only screen and (max-device-width: 480px) { 
    table[class="mainTable"] {
        width: 320px !important;
    }
    table[class="subTable"] {
        padding: 20px 0 0 !important;   
    }
    td[class="noBorder"] {
        border: 0 !important;
    }
}
</style>

内部代码：

<table width="640" border="0" cellspacing="0" cellpadding="0" class="mainTable" style="margin: 0px auto; font-family: Helvetica, Arial, sans-serif; padding: 35px 0 0;">
        <tr>
            <td style="font-size: 25px;">
                LOGO
            </td>
        </tr>
        <tr>
            <td>
                <table align="left" width="320" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0;">
                    <tr>
                        <td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
                            <p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
                            <p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
                            <a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
                        </td>
                        <td align="center" valign="top" class="noBorder" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
                            <p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
                            <p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
                            <a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
                        </td>
                    </tr>
                </table>
                <table width="320" border="0" cellspacing="0" cellpadding="0" class="subTable" style="margin: 0; padding: 0;">
                    <tr>
                        <td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
                            <p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
                            <p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
                            <a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
                        </td>
                        <td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px;">
                            <p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
                            <p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
                            <a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </td>
        </tr>
    </table>

但是，这不适用于我。在移动，我看到没有改变根据我的代码。我在Android Gmail应用程序检查（可能是，它不支持媒体查询）。在那里，四列自动转到两行中的两列，但是间距和边框没有工作。我也检查过索尼android默认电子邮件应用程序（应该支持媒体查询）。在那里，没有改变发生了！它显示与桌面显示完全相同的方式。除了Android设备，我没有任何其他移动设备检查：（

But, this doesn't work for me. At mobile, I've seen no change according to my code. I've checked at android Gmail app(may be, it's not supporting media query). At there, four columns automatically go to the two columns in a two row, but spacing and border haven't worked. I've also checked to Sony android default Email app(It should be support media query). At there, there is no changed happened! It shows exactly same way how the desktop shows. Besides Android device, I haven't any other mobile device for checking :(

如何工作响应电子邮件 [英] How to work responsive email

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何工作响应电子邮件 [英] How to work responsive email

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭