如何創建響應式 html email 模板
[英]How to created a responsive html email template
問題描述
首先，我知道這已經被問了很多像這兩個： 構建 HTML 電子郵件....和我可以放一個...標簽....但我沒有找到明確的有效答案！ 或者我不能很好理解！
我已經檢查了 CSS 的終極指南，它說 gmail 和 yahoo 以及@media在<head></head>中使用<style></style>標記是可以的。 但我的模板在 gmail 或雅虎中沒有任何樣式。 我想發送響應式電子郵件，所以我需要@media還有有什么方法可以在電子郵件中使用:nth()嗎？
我把片段放在下面，如果有人幫助我，我真的很感激！ 我使用putsmail在 gmail 和 yahoo mail 上對其進行了測試。
<,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">×.</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">×:</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 © 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>
1 個解決方案
解決方案1
0 2022-01-01 17:20:52
您在這里遇到兩個不同的 email 錯誤，一個在 Gmail 中，另一個在 Yahoo。 這是正在發生的事情以及如何解決它。
1. Gmail
Gmail對某些styles非常挑剔。 並且每當 Gmail 看到它不喜歡的東西時，Gmail 將刪除包含有問題樣式的整個<style>標記。 您可以在此處閱讀有關 Gmail 如何刪除包含特殊字符的 styles 的更多信息。 為了找出您的代碼有什么問題，我將您唯一的<style>標簽拆分為多個標簽。 然后我給自己發了 email 並檢查了 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%);
}
這里的解決方案就是簡單的將有問題的styles隔離在自己的<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 上，Yahoo 會從<head>標記中刪除內容。 （您可以在此處閱讀有關此內容的更多信息。）但它僅適用於 email 內的第一個<head>標記。 我知道你在想什么，HTML 通常只有一個<head>元素。 但事實證明我們可以添加第二個<head>標簽，Yahoo 會將內容保留在第二個<head>中。 因此，通常的做法是，在 Android 上讓響應式電子郵件在 Yahoo 中工作，首先添加一個空的<head>標簽，然后添加一個真正的<head>以及您的所有內容。 令人驚訝的是，這在 email 客戶端和渲染引擎中得到了很好的支持。 這是一個例子：
!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>
另請注意，雅虎在 CSS 評論方面存在錯誤，通常最好在發送 email 之前刪除所有 CSS 評論。
當使用外部 CSS 文件時，如何使 HTML 表響應 email 模板是不可能的
[英]How to make HTML table responsive for email template when using an external CSS file is not a possibility
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.