如何创建响应式 html 电子邮件模板

Question

首先我知道很多人都问过这个问题，比如这两个问题：Building HTML emails .... and Can I put a ... tag .... 但我没有找到明确有效的答案回答！！还是我没看懂！！

我已经检查过 The Ultimate Guide to CSS 并且它说在 <head></head> 中使用 <style></style> 标签对于 gmail 和 yahoo 以及 @media 是可以的。但我的模板在 gmail 或 yahoo 中没有任何样式。我想发送响应式电子邮件，所以我需要 @media 还有什么方法可以在电子邮件中使用 :nth()？

我把代码片段放在下面，如果有人帮助我，我真的很感激！我用 putsmail 在 gmail 和 yahoo 邮件上测试它。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Order</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
/**
* Avoid browser level font resizing.
* 1. Windows Mobile
* 2. iOS / OSX
*/
body,
table,
td,
a {
    -ms-text-size-adjust: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
* Remove extra space added to tables and cells in Outlook.
*/
table,
td {
    mso-table-rspace: 0pt;
    mso-table-lspace: 0pt;
}

/**
* Better fluid images in Internet Explorer.
*/
img {
    -ms-interpolation-mode: bicubic;
}

/**
* Remove blue links for iOS devices.
*/
a[x-apple-data-detectors] {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
}

/**
* Fix centering issues in Android 4.4.
*/
div[style*="margin: 16px 0;"] {
    margin: 0 !important;
}

body {
    max-width: 1100px !important;
    height: 100% !important;
    margin: 0 auto !important;
    font-family: Tahoma;
    background-color: #f7f7f7;
    padding: 20px;
}

.rtl{
    direction: rtl;
}
.ltr{
    direction: ltr;
}

/**
* Collapse table borders to avoid space between cells.
*/
/* table {
    border-collapse: collapse !important;
} */

a {
    color: #1a82e2;
}

img {
    height: auto;
    line-height: 100%;
    text-decoration: none;
    border: 0;
    outline: none;
}

p{
    margin: 0px;
}
.main-padding{
    padding: 20px;
}
.main_table{
    background-color: #fff;
    border: 1px solid #dddddd;
}
.header_section{
    width: 100%;
    color: #1a1b41;
    border-bottom: 3px solid #ffc107;
    font-size: 12px;
}
.title_section{
    width: 100%;
    color: #1a1b41;
    border: 3px solid #1a1b41;
    font-size: 15px;
    text-align: center;
    padding: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status_section{
    width: 100%;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
}
.status_section--success{
    background-color: #28a745;
}
.status_section--fail{
    background-color: #dc3545;
}
.status_section .icon_wrapper{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.16);
}
.status_section .icon{
    width: 26px;
    margin: 18px;
}
.items_section_wrapper{
    width: 60%;
    padding: 10px 20px;
    vertical-align: top;
}
.items_section{
    width: 100%;
    margin-bottom: 20px;
}
.items_section .avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.items_section .info{
    padding: 0px 8px;
}
.items_section .info .title{
    margin-bottom: 2px;
    text-align: start;
    font-size: 14px;
    color: #1a1b41;
    font-weight: 700;
}
.items_section .info .location{
    text-align: start;
    font-size: 12px;
    color: #505050;
}
.items_section .card{
    background-color: #e4e4e4;
    padding: 4px;
    border-radius: 4px;
}
.items_section .card .image{
    vertical-align: top;
    width: 20%;
}
.items_section .card img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 15px;
    box-shadow: 0px 2px 5px #a5a5a5;
}
.items_section .card .info_wrapper{
    vertical-align: top;
}
.items_section .card .title{
    font-size: 14px;
    color: #000;
    padding: 8px;
}
.items_section .card .price{
    padding: 8px;
    font-size: 18px;
    color: #000;
}
.items_section .card .price{
    padding: 8px;
    font-size: 18px;
    color: #000;
}
.items_section .card .price-total{
    padding: 8px 0;
    font-size: 18px;
    color: #000;
    font-weight: 800;
    text-align: end;
}
.items_section .card .sign{
    padding: 0 4px;
    font-size: 16px;
    color: #505050;
    font-weight: 800;
}
.items_section .card .number{
    font-size: 18px;
    color: #000;
    font-weight: 800;
}
.items_section .card .attr{
    padding: 0px 8px;
}
.items_section .card .dot{
    color: #ff3366;
    font-size: 16px;
}
.rtl .items_section .card .value{
    color: #1a1b41;
    font-size: 12px;
    margin-bottom: 4px;
    width: 50%;
    font-weight: 800;
    float: right;
}
.ltr .items_section .card .value{
    color: #1a1b41;
    font-size: 12px;
    margin-bottom: 4px;
    width: 50%;
    font-weight: 800;
    float: left;
}
.items_section .shipping_wrapper{
    width: 100%;
    font-size: 12px;
    font-weight: 700;
}
.items_section .shipping_wrapper .icon{
    width: 20px;
}
.details_wrapper{
    width: 100%;
}
.total_recipient_table-side{
    padding: 10px 20px;
    vertical-align: top;
}
.total_recipient_table-bottom{
    display: none;
}
.detail_table{
    width: 100%;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
    border-radius: 4px;
    border-spacing: 0;
}
.detail_table .header{
    font-size: 16px;
    font-weight: 700;
    text-align: start;
    padding: 8px;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.detail_table .rows:nth-child(even){
    background-color: #eee;
}
.detail_table .rows .title{
    font-size: 12px;
    font-weight: 700;
    padding: 8px;
    text-align: start;
    min-width: 100px;
}
.detail_table .rows .text{
    font-size: 12px;
    font-weight: 700;
    padding: 8px;
    text-align: end;
}
.btns_section{
    width: 100%;
}
.btns_section .btn_wrapper{
    display: flex;
    flex-wrap: wrap;
}
.btns_section button{
    font-size: 13px;
    padding: 8px;
    min-width: 100px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    margin: 4px;
}
.btns_section button:hover{
    cursor: pointer;
}
.btns_section button:focus{
    outline: none;
}
.btn_s{
    background-color: #28a745;
}
.btn_d{
    background-color: #dc3545;
}
.btn_w{
    background-color: #ffc107;
}
.btn_i{
    background-color: #17a2b8;
}
.action_section button{
    background-color: #ffc107;
    font-size: 15px;
    padding: 10px;
    min-width: 150px;
    color: #fff;
    text-transform: uppercase;
    border: none;
}
.action_section button:hover{
    background-color: #ffc107ee;
    cursor: pointer;
}
.action_section button:focus{
    background-color: #ffc107ee;
    outline: none;
}
.footer_section{
    width: 100%;
    border-top: 3px solid #757575;
}
.footer_section td{
    font-size: 10px;
    text-align: center;
    color: #1a1b41;
}
.footer_section a{
    text-decoration: none;
    color: #1a1b41;
}
.footer_section a:hover{
    color: #ffc107;
}
.mobile{
    display: none;
}
@media (max-device-width: 767px),
 (max-width: 767px) {
    body{
        padding: 5px;
    }
    .main-padding{
        padding: 10px 5px;
    }
    .items_section_wrapper{
        width: 100%;
        padding: 10px 5px;
    }
    .items_section .card .image{
        width: 25%;
    }
    .items_section .card img{
        border-radius: 4px;
    }
    .items_section .card .attr{
        padding: 8px 0 0;
    }
    .items_section .card .price{
        padding: 8px 0 0;
        font-size: 16px;
    }
    .ltr .items_section .card .price{
        float: left;
    }
    .rtl .items_section .card .price{
        float: right;
    }
    .items_section .card .price-total{
        padding: 8px 0 0;
        font-size: 16px;
    }
    .items_section .card .sign{
        padding: 0 4px;
        font-size: 14px;
    }
    .items_section .card .number{
        font-size: 16px;
    }
    .total_recipient_table-side{
        display: none;
    }
    .total_recipient_table-bottom{
        display: table-row;
    }
    .desktop{
        display: none;
    }
    .mobile{
        display: table;
    }
}
</style>

</head>
<!-- ltr / rlt -->
<body class="ltr">

    <!-- start preheader -->
    <div class="preheader" style="display: none; max-width: 0; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; opacity: 0;">
        <!-- A preheader is the short summary text that follows the subject line when an email is viewed in the inbox. -->
        Your Order submitted
    </div>
    <!-- end preheader -->

    <!-- start body -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="main_table">
        <tr>
            <td align="center" class="main-padding">
                <table class="header_section">
                    <tr>
                        <td>
                            Example.com
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" class="main-padding">
                <table class="title_section">
                    <tr>
                        <td>
                            Your <span style="color: #ffc107;">Order</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Thanks for choosing us!
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" class="main-padding">
                <!-- for failed change status_section--success to status_section--fail ALSO img src to times-circle-solid.png -->
                <table class="status_section status_section--success">
                    <tr>
                        <td style="width:70px;">
                            <div class="icon_wrapper">
                                <img class="icon" src="check-circle-solid.png">
                            </div>
                        </td>
                        <td style="font-weight: 700;font-size: 14px;">
                            payment was successful<span> - your invoice code: </span><span>1235789</span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width: 100%;">
                    <tr>
                        <td class="items_section_wrapper">
                            <table class="items_section">
                                <tr class="vendor">
                                    <td style="width: 40px;">
                                        <img src="1.jpg" class="avatar">
                                    </td>
                                    <td class="info">
                                        <p class="title">Vendor Name</p>
                                        <p class="location">location</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="card">
                                        <table style="width: 100%; border-spacing: 0;">
                                            <tr>
                                                <td class="image">
                                                    <img src="1.jpg">
                                                </td>
                                                <td class="info_wrapper">
                                                    <table style="width: 100%;">
                                                        <tr>
                                                            <td class="title" colspan="2">Lorem Ipsum</td>
                                                        </tr>
                                                        <tr class="desktop">
                                                            <td colspan="2" class="attr">
                                                                <p class="value"><span class="dot">&bull; </span>color: red</p>
                                                            </td>
                                                        </tr>
                                                        <tr class="desktop">
                                                            <td class="price">12 $<span class="sign">&times;</span><span class="number">10</span></td>
                                                            <td class="price-total">120 $</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <table style="width: 100%;" class="mobile">
                                                        <tr>
                                                            <td class="attr" colspan="1">
                                                                <p class="value"><span class="dot">&bull; </span>color: red</p>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <p class="price">12 $<span class="sign">&times;</span><span class="number">10</span></p>
                                                                <p class="price-total">120 $</p>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <table class="shipping_wrapper">
                                            <tr>
                                                <td style="width: 24px;">
                                                    <img src="truck-solid.png" class="icon">
                                                </td>
                                                <td>shipping</td>
                                                <td style="text-align: end;">20 $</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class="total_recipient_table-side">
                            <table class="details_wrapper">
                                <tr>
                                    <td style="padding-bottom:24px;">
                                        <table class="detail_table">
                                            <tr>
                                                <td class="header" colspan="2">calc</td>
                                            </tr>
                                            <tr class="rows">
                                                <td class="title">Items</td>
                                                <td class="text">120 $</td>
                                            </tr>
                                            <tr class="rows">
                                                <td class="title">Tax Fee</td>
                                                <td class="text">10 $</td>
                                            </tr>
                                            <tr class="rows">
                                                <td class="title">Shipping</td>
                                                <td class="text">20 $</td>
                                            </tr>
                                            <tr class="rows">
                                                <td class="title">Total</td>
                                                <td class="text">150 $</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <table class="detail_table">
                                            <tr>
                                                <td class="header" colspan="2">recipient</td>
                                            </tr>
                                            <tr class="rows">
                                                <td class="title">full name</td>
                                                <td class="text">John Doe</td>
                                            </tr>
                                            <tr class="rows">
                                                <td class="title">email</td>
                                                <td class="text">jdoe@example.com</td>
                                            </tr>
                                            <tr class="rows">
                                                <td class="title">phone</td>
                                                <td class="text">00000000000</td>
                                            </tr>
                                            <tr class="rows">
                                                <td class="title">address</td>
                                                <td class="text">.............</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="total_recipient_table-bottom">
            <td class="main-padding">
                <table class="details_wrapper">
                    <tr>
                        <td style="padding-bottom:24px;">
                            <table class="detail_table">
                                <tr>
                                    <td class="header" colspan="2">calc</td>
                                </tr>
                                <tr class="rows">
                                    <td class="title">Items</td>
                                    <td class="text">120 $</td>
                                </tr>
                                <tr class="rows">
                                    <td class="title">Tax Fee</td>
                                    <td class="text">10 $</td>
                                </tr>
                                <tr class="rows">
                                    <td class="title">Shipping</td>
                                    <td class="text">20 $</td>
                                </tr>
                                <tr class="rows">
                                    <td class="title">Total</td>
                                    <td class="text">150 $</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="detail_table">
                                <tr>
                                    <td class="header" colspan="2">recipient</td>
                                </tr>
                                <tr class="rows">
                                    <td class="title">full name</td>
                                    <td class="text">John Doe</td>
                                </tr>
                                <tr class="rows">
                                    <td class="title">email</td>
                                    <td class="text">jdoe@example.com</td>
                                </tr>
                                <tr class="rows">
                                    <td class="title">phone</td>
                                    <td class="text">00000000000</td>
                                </tr>
                                <tr class="rows">
                                    <td class="title">address</td>
                                    <td class="text">.............</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" class="main-padding">
                <table class="btns_section">
                    <tr>
                        <td class="btn_wrapper">
                            <a href="#"><button class="btn_s">Accept</button></a>
                            <a href="#"><button class="btn_d">Delete</button></a>
                            <a href="#"><button class="btn_w">Reject</button></a>
                            <a href="#"><button class="btn_i">Pend</button></a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" class="main-padding" style="padding-top: 40px;padding-bottom: 40px;">
                <table class="action_section">
                    <tr>
                        <td>
                            <a href="#"><button>Button</button></a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" class="main-padding">
                <table class="footer_section">
                    <tr>
                        <td>
                            Copyright &#169; 2020 example.com All rights reserved | <span><a href="#">Home</a></span> | <span><a href="#">Contact Us</a></span> |
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!-- end body -->

</body>
</html>

Answer 1

您在这里遇到了两个不同的电子邮件错误，一个在 Gmail 中，另一个在 Yahoo 中。这是发生了什么以及如何解决它。

1。 Gmail

Gmail 对某些样式非常挑剔。每当 Gmail 发现它不喜欢的内容时，Gmail 就会删除包含有问题样式的整个 <style> 标签。你可以read more about how Gmail removes styles that include special characters here。为了找出您的代码有什么问题，我将您的一个且唯一的 <style> 标记拆分为多个。然后我给自己发了邮件并检查了 Gmail 中的代码，并查看了 Gmail 保留的内容。然后我得出结论，Gmail 不喜欢您的代码的是 box-shadow 声明和 / 语法。

.detail_table{
    width: 100%;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
    border-radius: 4px;
    border-spacing: 0;
}
.detail_table .header{
    font-size: 16px;
    font-weight: 700;
    text-align: start;
    padding: 8px;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}

这里的解决方案只是将有问题的样式隔离在它们自己的 <style> 标记中。因此，从巨大的 <style> 标签中删除两个 box-shadow 声明，并添加第二个 <style> 标签，仅包含以下内容：

.detail_table{
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.detail_table .header{
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}

2。雅虎

我假设您正在 Yahoo Android 上进行测试。在 Android，雅虎从 <head> 标签中删除了内容。（您可以 read more about this here。）但它只对电子邮件中的第一个 <head> 标签这样做。我知道您在想什么，HTML 通常只有一个 <head> 元素。但事实证明我们可以添加第二个 <head> 标签，雅虎会将内容保留在第二个 <head> 中。因此，要让响应式电子邮件在 Yahoo Android 上正常工作，一般做法是先添加一个空的 <head> 标签，然后再添加一个包含所有内容的真实 <head>。令人惊讶的是，这在电子邮件客户端和渲染引擎中得到了很好的支持。这是一个例子：

!DOCTYPE html>
<html>
<head></head>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Order</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">
    /**
    * Avoid browser level font resizing.
    * 1. Windows Mobile
    * 2. iOS / OSX
    */
    body,
    table,
    td,
    a {
        …
    }
    </style>
</head>
<body>
…
</body>
</html>

另请注意，雅虎 a bug with CSS comments 并且在发送电子邮件之前删除所有 CSS 评论通常是一个好习惯。

如何创建响应式 html 电子邮件模板

How to created a responsive html email template

html

css

email

html-email

1。 Gmail

2。雅虎