从浏览器复制电子邮件模板时丢失流体宽度
Losing fluid width while copying email template from browser
我制作了这个电子邮件模板。但是，当我在浏览器上呈现它并将结果复制到 gmail 或 mac 邮件时，我认为根 table 的宽度流动性会丢失。我使用 100% 宽度。当我在浏览器上调整它的大小时，它非常流畅。基本上它在复制期间获得浏览器的宽度 window。你能检查这个 html 看看为什么会这样吗？
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Basith from Bluroe</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style type="text/css">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px;">
<table style="font-family:'Open Sans',sans-serif;" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#fafafa">
<tbody>
<tr>
<td style="padding-top:50px;padding-bottom:50px;">
<table style="width:100%">
<tbody>
<tr>
<td></td>
<td style="width:500px;">
<table style="color:#555;font-size:14px;">
<tbody>
<tr>
<td style="background:#fff;padding:30px;border:1px solid #ddd;border-top-width:3px;border-top-color:#e75967;">
<p>Hi there,</p>
<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</p>
<p>Best,</p>
<p>Basith</p>
</td>
</tr>
<tr>
<td style="padding:20px;">
<table style="width:100%;">
<tbody>
<tr>
<td>
<table style="color:#555;font-size:13px;">
<tbody>
<tr>
<td>
<img src="http://res.cloudinary.com/bluroe-labs/image/upload/v1496061160/avatar40_pmrou1.png"/>
</td>
<td style="padding-left:10px;">
<span><b>Basith</b> <span style="color:#999;">from Bluroe</span></span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:right;">
<a href="#" style="color:#999;font-size:13px;">Unsubscribe</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<td style="width:500px;">
这条线可能是罪魁祸首，因为它的宽度是固定的，您没有 CSS 让它在较小的视口上响应。
我建议为移动视图创建媒体查询，然后是 width:100% css class 并将其添加到 td
没有任何 css/media 控制移动视图的查询，无论屏幕大小如何，电子邮件客户端都会尝试呈现桌面视图。
这是我的代码，希望对你有帮助。
我删除了您拥有的额外 3 列 table，并为您的列添加了一种混合编码风格。如果您对此代码的任何部分有疑问，请告诉我。
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Basith from Bluroe</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style type="text/css">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px;">
<table style="font-family:'Open Sans',sans-serif;" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#fafafa">
<tbody>
<tr>
<td valign="top" style="text-align: center; vertical-align: top;padding:50px 0px;">
<!--[if gte mso 9]>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<div style="max-width: 500px; display: inline-block; vertical-align: top;">
<table style="color:#555;font-size:14px;" bgcolor="#fafafa">
<tbody>
<tr>
<td style="background:#fff;padding:30px;border:1px solid #ddd;border-top-width:3px;border-top-color:#e75967;text-align:left;"><p>Hi there,</p>
<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</p>
<p>Best,</p>
<p>Basith</p></td>
</tr>
<tr>
<td style="padding:20px;"><table style="width:100%;">
<tbody>
<tr>
<td><table style="color:#555;font-size:13px;">
<tbody>
<tr>
<td><img src="http://res.cloudinary.com/bluroe-labs/image/upload/v1496061160/avatar40_pmrou1.png"/></td>
<td style="padding-left:10px;"><span><b>Basith</b> <span style="color:#999;">from Bluroe</span></span></td>
</tr>
</tbody>
</table></td>
<td style="text-align:right;"><a href="#" style="color:#999;font-size:13px;">Unsubscribe</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
干杯
我制作了这个电子邮件模板。但是，当我在浏览器上呈现它并将结果复制到 gmail 或 mac 邮件时，我认为根 table 的宽度流动性会丢失。我使用 100% 宽度。当我在浏览器上调整它的大小时，它非常流畅。基本上它在复制期间获得浏览器的宽度 window。你能检查这个 html 看看为什么会这样吗？
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Basith from Bluroe</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style type="text/css">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px;">
<table style="font-family:'Open Sans',sans-serif;" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#fafafa">
<tbody>
<tr>
<td style="padding-top:50px;padding-bottom:50px;">
<table style="width:100%">
<tbody>
<tr>
<td></td>
<td style="width:500px;">
<table style="color:#555;font-size:14px;">
<tbody>
<tr>
<td style="background:#fff;padding:30px;border:1px solid #ddd;border-top-width:3px;border-top-color:#e75967;">
<p>Hi there,</p>
<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</p>
<p>Best,</p>
<p>Basith</p>
</td>
</tr>
<tr>
<td style="padding:20px;">
<table style="width:100%;">
<tbody>
<tr>
<td>
<table style="color:#555;font-size:13px;">
<tbody>
<tr>
<td>
<img src="http://res.cloudinary.com/bluroe-labs/image/upload/v1496061160/avatar40_pmrou1.png"/>
</td>
<td style="padding-left:10px;">
<span><b>Basith</b> <span style="color:#999;">from Bluroe</span></span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:right;">
<a href="#" style="color:#999;font-size:13px;">Unsubscribe</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<td style="width:500px;">
这条线可能是罪魁祸首，因为它的宽度是固定的，您没有 CSS 让它在较小的视口上响应。
我建议为移动视图创建媒体查询，然后是 width:100% css class 并将其添加到 td
没有任何 css/media 控制移动视图的查询，无论屏幕大小如何，电子邮件客户端都会尝试呈现桌面视图。
这是我的代码，希望对你有帮助。
我删除了您拥有的额外 3 列 table，并为您的列添加了一种混合编码风格。如果您对此代码的任何部分有疑问，请告诉我。
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Basith from Bluroe</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style type="text/css">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px;">
<table style="font-family:'Open Sans',sans-serif;" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#fafafa">
<tbody>
<tr>
<td valign="top" style="text-align: center; vertical-align: top;padding:50px 0px;">
<!--[if gte mso 9]>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<div style="max-width: 500px; display: inline-block; vertical-align: top;">
<table style="color:#555;font-size:14px;" bgcolor="#fafafa">
<tbody>
<tr>
<td style="background:#fff;padding:30px;border:1px solid #ddd;border-top-width:3px;border-top-color:#e75967;text-align:left;"><p>Hi there,</p>
<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</p>
<p>Best,</p>
<p>Basith</p></td>
</tr>
<tr>
<td style="padding:20px;"><table style="width:100%;">
<tbody>
<tr>
<td><table style="color:#555;font-size:13px;">
<tbody>
<tr>
<td><img src="http://res.cloudinary.com/bluroe-labs/image/upload/v1496061160/avatar40_pmrou1.png"/></td>
<td style="padding-left:10px;"><span><b>Basith</b> <span style="color:#999;">from Bluroe</span></span></td>
</tr>
</tbody>
</table></td>
<td style="text-align:right;"><a href="#" style="color:#999;font-size:13px;">Unsubscribe</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
干杯