我遇到了这个问题,我的电子邮件的字体大小会根据内容的显示而变化,例如,在这里这个简单的例子中,有一个项目在其中一行中带有和不带有额外的TD,这会完全改变电子邮件从一封电子邮件到另一封电子邮件的外观。
以下是我们有一个带有
end date
和一个
result
列:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>HTML Email Template Boilerplate</title>
<style type="text/css">
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
a {
text-decoration: none;
color: #2c2c2c;
}
@media screen and (max-width: 699.98px) {
td.two-column-header {
width: 95px !important;
max-width: 95px !important;
min-width: 95px !important;
}
img.two-col-img {
width: 100% !important;
max-width: 100% !important;
}
}
/*@media screen and (max-width: 399.98px) {
}*/
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
.human-reference {
background-color:#f0f0f0;
color:#0f0f0f;
}
.badge-red {
background-color: #dc2626;
color: #ffffff;
}
.service {
background-color:#DDE0E1;
color:#0f0f0f;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
</head>
<body style="Margin:0;padding:0;min-width:100%;background-color:#dde0e1;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color:#dde0e1!important;}
body, table, td, p, a {font-family: Calibri, sans-serif !important;}
</style>
<![endif]-->
<center style="width: 100%;table-layout: fixed;background-color:#dde0e1;padding-bottom: 40px;">
<div style="max-width: 1250px;background-color: #fafafa;box-shadow: 0 0 10px rgba(0, 0, 0, .2);">
<!-- Preheader -->
<div style="font-size: 0px;color: #fafafa;line-height: 1px;mso-line-height-rule:exactly;display: none;max-width: 0px;max-height: 0px;opacity: 0;overflow: hidden;mso-hide:all;">
<!-- latest update -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum porro tenetur ratione labore perferendis iste nesciunt temporibus maxime earum ut.
</div>
<!-- End Preheader -->
<table align="center" style="border-spacing:0;color:#0f0f0f;font-family: 'Calibri',sans-serif, Calibri, Helvetica;background-color: #fafafa;Margin:0;padding:0;width: 100%;max-width: 1250px;" role="presentation">
<!-- SECTION ONE -->
<tr>
<td class="section-header" style="padding: 7px 15px; background-color: #FCD9A4; color: #0f0f0f; font-size: 20px; font-weight: bold;">
Lorem
</td>
</tr>
<tr>
<td>
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td style="padding: 15px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;" role="presentation">
<tr>
<td class="two-column-header" width="90" style="padding-right: 10px; width: 90px; max-width:90px; min-width:90px; border-spacing:0; vertical-align: top;">
<table width="100%" style="width: 100%; border-spacing:0;" role="presentation">
<tr>
<td style="text-align: right; padding-bottom: 5px;">
<span class="badge-red" style="font-weight:bold; text-transform:uppercase; padding: 2px 6px; border-radius: 2px; display: inline-block; mso-padding-alt: 0;">
<!--[if mso]>
<i style="letter-spacing: 3px; mso-text-raise: 1pt;"> </i>
<![endif]-->
LOREM
<!--[if mso]>
<i style="letter-spacing: 3px; mso-text-raise: -1pt;"> </i>
<![endif]-->
</span>
</td>
</tr>
<tr>
<td style="text-align: right; padding-bottom: 5px;">
<span class="human-reference" style="margin: 0; font-weight:bold;padding: 0 4px; margin-top: 0;text-transform:uppercase;line-height: 20px;border-radius: 2px;display: inline-block;text-align: center;white-space: nowrap;-webkit-text-size-adjust: none;">
<!--[if mso]>
<i style="letter-spacing: 3px; mso-text-raise: 1pt;"> </i>
<![endif]-->
001
<!--[if mso]>
<i style="letter-spacing: 3px; mso-text-raise: -1pt;"> </i>
<![endif]-->
</span>
</td>
</tr>
</table>
</td>
<td style="padding-right: 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="width: 100%; border-spacing:0;" role="presentation">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" style="width: 100%; border-spacing:0;" role="presentation">
<tr>
<td style="width: 33%; text-align: left;padding-right: 20px;">
<span style="margin: 0;font-weight:bold;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
Start |
</span>
<span style="margin: 0;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
2000-01-01 | 00:00
</span>
</td>
<td style="width: 33%; text-align: left;padding-right: 20px;">
<span style="margin: 0;font-weight:bold;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
End |
</span>
<span style="margin: 0;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
2000-01-01 | 10:00
</span>
</td>
<td style="width: 33%; text-align: left;padding-right: 20px;">
<span style="margin: 0;font-weight:bold;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
Results |
</span>
<span style="margin: 0;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
Lorem, ipsum dolor.
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 6px 0 20px 0; line-height: 20px;">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim vel necessitatibus eaque architecto, accusantium tenetur.
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" style="width: 100%; border-spacing:0;" role="presentation">
<tr>
<td>
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" align="left" role="presentation" style="Margin: 0px 0px 2px 0px;">
<tr>
<td border="0">
<![endif]-->
<span class="service" style="margin: 0;margin-bottom:2px;Margin: 0 0 2px 0;padding: 0 4px;line-height: 20px;border-radius: 2px;display: inline-block;text-align: center;white-space: nowrap;-webkit-text-size-adjust: none;">
<!--[if mso]>
<i style="letter-spacing: 2px; mso-text-raise: 1pt;"> </i>
<![endif]-->
Service 01
<!--[if mso]>
<i style="letter-spacing: 2px; mso-text-raise: -1pt;"> </i>
<![endif]-->
</span>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" align="left" role="presentation" style="Margin: 0px 0px 2px 0px;">
<tr>
<td border="0">
<![endif]-->
<span class="service" style="margin: 0;margin-bottom:2px;Margin: 0 0 2px 0;padding: 0 4px;line-height: 20px;border-radius: 2px;display: inline-block;text-align: center;white-space: nowrap;-webkit-text-size-adjust: none;">
<!--[if mso]>
<i style="letter-spacing: 2px; mso-text-raise: 1pt;"> </i>
<![endif]-->
Service 02
<!--[if mso]>
<i style="letter-spacing: 2px; mso-text-raise: -1pt;"> </i>
<![endif]-->
</span>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="separator" style="border-bottom: 2px solid #DDE0E1;"></td>
</tr>
</table>
</td>
</tr>
<!-- END SECTION ONE -->
<!-- FEEDBACK -->
<tr>
<td style="padding: 10px 0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td style="padding: 0 10px; ">
<span>Was this email helpful? </span>
<a class="feedback-link" style="color: #0330CF; text-decoration:underline; font-weight: bold;" target="_blank" href="mailto:[email protected]?subject=[LOREM IPSUM] Mail Feedback">Send us your feedback</a>
<span style="margin-left: 2px;">so we can improve!</span>
</td>
</tr>
</table>
</td>
</tr>
<!-- END FEEDBACK -->
</table>
</div>
</center>
</body>
</html>
我们的后端只需删除
td
如果没有结果。我一直在尝试的一件事是,总是有3列,并将每列设置为33%,这在桌面上很好,但在移动设备上,它只是拒绝应用宽度:
<table width="100%" cellpadding="0" cellspacing="0" style="width: 100%; border-spacing:0;" role="presentation">
<tr>
<td class="one-third" style="width: 33%; max-width: 33%; text-align: left; padding-right: 20px; background-color: red;">
<span style="margin: 0;font-weight:bold;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
Start |
</span>
<span style="margin: 0;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
2000-01-01 | 00:00
</span>
</td>
<td class="one-third" style="width: 33%; max-width: 33%; text-align: left; padding-right: 20px; background-color: blue;">
<span style="margin: 0;font-weight:bold;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
End |
</span>
<span style="margin: 0;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
TBD
</span>
</td>
<td class="one-third" style="width: 33%; max-width: 33%; text-align: left; padding-right: 20px; background-color: green;">
</td>
</tr>
</table>
你可以看到,当我应用一些颜色时,三个“33%”列被完全忽略了
