如何使用内联 css 为 html 电子邮件设计添加像 bootstrap 这样的列大小调整功能？
How to put columns resize feature like bootstrap using inline css for html email design?
当我们在 HTML 页面中使用 bootstrap CSS 时，有一个网格布局，如果屏幕较小，显示在半页上的列将扩展到整页.在 bootstrap 中，我们使用 col-sm-12 和 col-md-6 等网格列来声明它
我正在设计一个电子邮件客户端，其中内联 CSS 是设计选项，但我们为网络浏览器设置的任何 div 大小都不适用于移动设备，因为它不会调整大小。关于如何使用内联 CSS 在电子邮件模板中实现与 bootstrap 相同的功能，您有什么建议吗？
通常我们希望使用默认值 mobile-first，这也是 Bootstrap 所采用的方法。所以这意味着默认为 100% 宽度。
对于桌面，通常超过 600 像素（根据需要变化），我们希望宽度减半。
事实上，这也涉及到堆叠，所以假设桌面有两列，每列 300px。
你说的是“内联”，但我认为这是一般的 HTML 电子邮件。我们实际上允许一些 CSS.
我得到的是 600 像素（电子邮件的宽度）以下的任何内容的 100% 宽度。否则，它是一半（第二列与它并排）。
<!-- /* GENERAL BOILERPLATE */ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
@-ms-viewport {
width: device-width;
}
</style>
<!-- /* COLUMN WIDTH FOR DESKTOPS (BUT NOT OUTLOOK DESKTOP ON WINDOWS) */ -->
<style type="text/css">
@media screen and (min-width:600px) {
.column {
max-width:300px!important;
}
}
</style>
</head>
<!-- END HEAD -->
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<center id="wrapper" class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
<tr>
<td class="two-column" style="padding:0;border-collapse:collapse;background-color:blue;font-size:0;" >
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" role="presentation">
<tr>
<!-- /* OUTLOOK WIDTH */ -->
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<!-- /* MAX-WIDTH 100% by DEFAULT, WILL GET OVERRIDDEN ON DESKTOP */ -->
<div class="column" style="width:100%;max-width:100%;display:inline-block;vertical-align:top;background-color:red;font-size:16px;">
<p>Spicy jalapeno bacon ipsum dolor amet occaecat enim andouille capicola tempor mollit shoulder cillum biltong ea labore dolore id strip steak. Picanha sausage laboris turducken non. Nostrud kevin laborum beef. Doner prosciutto leberkas cow, salami landjaeger fugiat tri-tip pancetta voluptate cillum ullamco. Meatloaf tri-tip sed, laboris bacon sunt ut aliquip kielbasa in nostrud.</p>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<!-- /* OUTLOOK WIDTH (2nd column) */ -->
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<!-- /* (2nd column) */ -->
<div class="column" style="width:100%;max-width:100%;display:inline-block;vertical-align:top;background-color:green;font-size:16px;">
<p>Hot and Spicy jalapeno bacon ipsum dolor amet occaecat enim andouille capicola tempor mollit shoulder cillum biltong ea labore dolore id strip steak. Picanha sausage laboris turducken non. Nostrud kevin laborum beef. Doner prosciutto leberkas cow, salami landjaeger fugiat tri-tip pancetta voluptate cillum ullamco. Meatloaf tri-tip sed, laboris bacon sunt ut aliquip kielbasa in nostrud.</p>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
为什么不弯曲？ Outlook 不支持 Flex，但我们可以为 Outlook 编写其他代码。但是在用户不使用 Gmail 帐户的 Gmail iOS/Android 上也不支持 flex。所以我认为它还没有为 prime-time 做好准备。
Width:100% & max-width:100% 通过将每个块设置为可用屏幕的整个宽度来让我们获得移动体验。
但是一旦我们到达桌面地形（在本例中为 600px；作为模板的 max-width），我们将需要切换到 300px (50%) 的 max-width。这就是 @media 查询的用武之地，它在除 Outlook 之外的所有桌面上都得到了很好的支持。
Outlook 拥有自己的 table，其中两个 td 为 50%，具有其专有条件代码（如果 mso）。
这已经在所有主要电子邮件环境中进行了测试。对于极少数不支持@media 查询的桌面环境，他们将获得移动版本：即全宽堆叠列。对于这 0.01% 的用户来说，这是一个非常好的后备。
当我们在 HTML 页面中使用 bootstrap CSS 时，有一个网格布局，如果屏幕较小，显示在半页上的列将扩展到整页.在 bootstrap 中，我们使用 col-sm-12 和 col-md-6 等网格列来声明它
我正在设计一个电子邮件客户端，其中内联 CSS 是设计选项，但我们为网络浏览器设置的任何 div 大小都不适用于移动设备，因为它不会调整大小。关于如何使用内联 CSS 在电子邮件模板中实现与 bootstrap 相同的功能，您有什么建议吗？
通常我们希望使用默认值 mobile-first，这也是 Bootstrap 所采用的方法。所以这意味着默认为 100% 宽度。
对于桌面，通常超过 600 像素（根据需要变化），我们希望宽度减半。
事实上，这也涉及到堆叠，所以假设桌面有两列，每列 300px。
你说的是“内联”，但我认为这是一般的 HTML 电子邮件。我们实际上允许一些 CSS.
我得到的是 600 像素（电子邮件的宽度）以下的任何内容的 100% 宽度。否则，它是一半（第二列与它并排）。
<!-- /* GENERAL BOILERPLATE */ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="x-apple-disable-message-reformatting" />
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
@-ms-viewport {
width: device-width;
}
</style>
<!-- /* COLUMN WIDTH FOR DESKTOPS (BUT NOT OUTLOOK DESKTOP ON WINDOWS) */ -->
<style type="text/css">
@media screen and (min-width:600px) {
.column {
max-width:300px!important;
}
}
</style>
</head>
<!-- END HEAD -->
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<center id="wrapper" class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
<tr>
<td class="two-column" style="padding:0;border-collapse:collapse;background-color:blue;font-size:0;" >
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" role="presentation">
<tr>
<!-- /* OUTLOOK WIDTH */ -->
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<!-- /* MAX-WIDTH 100% by DEFAULT, WILL GET OVERRIDDEN ON DESKTOP */ -->
<div class="column" style="width:100%;max-width:100%;display:inline-block;vertical-align:top;background-color:red;font-size:16px;">
<p>Spicy jalapeno bacon ipsum dolor amet occaecat enim andouille capicola tempor mollit shoulder cillum biltong ea labore dolore id strip steak. Picanha sausage laboris turducken non. Nostrud kevin laborum beef. Doner prosciutto leberkas cow, salami landjaeger fugiat tri-tip pancetta voluptate cillum ullamco. Meatloaf tri-tip sed, laboris bacon sunt ut aliquip kielbasa in nostrud.</p>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<!-- /* OUTLOOK WIDTH (2nd column) */ -->
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<!-- /* (2nd column) */ -->
<div class="column" style="width:100%;max-width:100%;display:inline-block;vertical-align:top;background-color:green;font-size:16px;">
<p>Hot and Spicy jalapeno bacon ipsum dolor amet occaecat enim andouille capicola tempor mollit shoulder cillum biltong ea labore dolore id strip steak. Picanha sausage laboris turducken non. Nostrud kevin laborum beef. Doner prosciutto leberkas cow, salami landjaeger fugiat tri-tip pancetta voluptate cillum ullamco. Meatloaf tri-tip sed, laboris bacon sunt ut aliquip kielbasa in nostrud.</p>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
为什么不弯曲？ Outlook 不支持 Flex，但我们可以为 Outlook 编写其他代码。但是在用户不使用 Gmail 帐户的 Gmail iOS/Android 上也不支持 flex。所以我认为它还没有为 prime-time 做好准备。
Width:100% & max-width:100% 通过将每个块设置为可用屏幕的整个宽度来让我们获得移动体验。
但是一旦我们到达桌面地形（在本例中为 600px；作为模板的 max-width），我们将需要切换到 300px (50%) 的 max-width。这就是 @media 查询的用武之地，它在除 Outlook 之外的所有桌面上都得到了很好的支持。
Outlook 拥有自己的 table，其中两个 td 为 50%，具有其专有条件代码（如果 mso）。
这已经在所有主要电子邮件环境中进行了测试。对于极少数不支持@media 查询的桌面环境，他们将获得移动版本：即全宽堆叠列。对于这 0.01% 的用户来说，这是一个非常好的后备。