响应式两列 HTML 电子邮件模板

【问题标题】：Responsive Two Column HTML Email Template响应式两列 HTML 电子邮件模板
【发布时间】：2019-01-22 14:37:25
【问题描述】：

我已经开发了一个 HTML 电子邮件模板，并且还有 2 列设计。在我的情况下，一列是图像，另一列是文本，此外，文本由标题和段落组成。由于所有样式都是内联的，所以我在不同的屏幕上都面临问题。

图片一是普通屏幕：

图2是大屏的：

所以一切都与字体有关如果我减少字体，它在某些设备上会显示得非常小，如果我增加字体，两列设计就会中断。

这是我的代码：

<table border="0" cellpadding="0" cellspacing="0" width="960" align="left" style="width: 960px; width: calc(100%); max-width: 960px; background-color: #301f0d; color:#fff;" >
   <tr>
      <td style="margin: 0px; padding: 0; text-align: center;">
         <div style="margin:0; max-width:960px; min-width:260px;">
            <div style="text-align:center; font-size:0;">
               <!--Left column-->
               <div style="display:inline-block; font-size: 16px; text-align:center; vertical-align:top; width:50%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(50%); width:calc(230400px - 48000%); min-width: calc(50%);" width="480" align="left">
                  <h1 style="font-size:calc(70% + 1vw); margin: 90px 10px 10px; text-transform: uppercase; text-align: center;padding: 0 12px;">Englestead Canyon Trip Report</h1>
                  <p style="font-size:calc(60% + 0.5vw); margin: 10px 10px 10px; text-align: center; line-height: 1.6;padding: 0 12px;">Ambassador Kenyon Virchow shares tips and tricks for navigating this epic canyon in Zion National Park. </p>
                  <a target="_blank" style="background-color:#301f0d;text-transform:uppercase;border: 2px solid #fff;padding: 0.4em 0;color:#fff;text-decoration: none;font-size:calc(50% + 0.5vw); font-weight:bold;display:inline-block; margin:10px 0 20px;width:40%;" href="http://www.example.com">Read More</a>
               </div>
               <!--Right Column -->
               <div style="display:inline-block; font-size:16px; text-align:center; vertical-align:top; width:50%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(50%); width:calc(230400px - 48000%); min-width: calc(50%);" width="480" align="right">
                  <!-- Image -->
                  <p style="margin: 0px; text-align: center; background-color:#301f0d;">
                     <a target="_blank" href="http://www.example.com">
                     <img src="http:/image.jpg" alt="alt" style="width: 480px; max-width: 480px; display: block;" width="480" border="0">
                     </a>
                  </p>
               </div>
            </div>
         </div>
      </td>
   </tr>
</table>

【问题讨论】：

  • 如果你对每一列使用嵌套表而不是 div 内联块，我猜会有所帮助..
  • 或者为了更好地兼容不同客户端的浏览器，您可以使用 mjml.io 等框架，但这完全取决于您的需求
  • 在嵌套表中，我在两列的 Outlook 中遇到了更多问题。
  • 是的，outlook 确实总是有问题，但尝试框架它会帮助你更好地支持客户
  • 您可以使用媒体查询来更改移动设备中的字体大小（>95% 的设备支持媒体查询），或者您可以堆叠列或反向堆叠列。

标签： css html-table html-email email-templates html-templates


【解决方案1】： 
<!DOCTYPE html>
     <html>
       <head>
      <title>Page Title</title>
   </head>

  <body>
 <style>
*,
 ::after,
 ::before {
    box-sizing: border-box;
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.block {
    padding-top: 90px;
    padding-bottom: 100px;
}

.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.max-container-map-left {
    position: relative;
    z-index: 1;
}

.form-footer {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.get_more_info .form-footer {
    position: relative;
}

.max-container-map-left {
    max-width: 640px;
    padding: 0px 50px;
    margin: 0 0 0 auto;
}

.get_more_info {
    background-color: #252525;
    color: #fff;
    position: relative;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.get_more_info h2 {
    font-size: 40px;
    color: #fff;
    margin-bottom: 30px;
    font-weight: bold;
}

.get_more_info h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
    padding-top: 20px;
}

.get_more_info .form-footer {
    position: relative;
}

.get_more_info .form-footer:before {
    content: "";
    opacity: 0.75;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
}
</style>
<div class="get_more_info">
    <div class="row no-gutters">
        <div class="col-md-6 block">
            <div class="max-container-map-left">
                <h2> Get More Info </h2>
                <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 like Aldus PageMaker including versions of Lorem Ipsum</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-footer block" style="background-image: 
       url(http://via.placeholder.com/900x900);">
            </div>
        </div>
    </div>
   </div>
  </body>

【讨论】：

  • 应该是内联样式。
【解决方案2】： 

<table border="0" cellpadding="0" cellspacing="0" width="960" align="left" style="width: calc(100%); max-width: 960px; background-color: #301f0d; color:#fff;" >
   <tr style="background-color:#301f0d;">
      <td style="width:50%; text-align: center; padding:5%;">
      
        <h1 style="font-size:calc(70% + 1vw); text-transform: uppercase; text-align: center; margin:0;">Englestead Canyon Trip Report</h1>
        <p style="font-size:calc(60% + 0.5vw); margin-top: 10px; text-align: center; line-height: 1.6;">Ambassador Kenyon Virchow shares tips and tricks for navigating this epic canyon in Zion National Park. </p>
         <a target="_blank" style="background-color:#301f0d;text-transform:uppercase;border: 2px solid #fff;padding: 0.4em 0;color:#fff;text-decoration: none;font-size:calc(50% + 0.5vw); font-weight:bold;display:inline-block; margin-top:10px;width:40%;" href="http://www.example.com">Read More</a>
      </td>
      
       <td style="width:50%; text-align: center; font-size: 0; background:url('http://thechurchontheway.org/wp-content/uploads/2016/05/placeholder1.png') no-repeat center; background-size: cover;">
        <a target="_blank" href="http://www.example.com" style="font-size: 0;">
           <!-- <img src="http://thechurchontheway.org/wp-content/uploads/2016/05/placeholder1.png" alt="alt" style="width: 100%;"> -->
        </a>
      </td>
   </tr>
</table>

https://jsfiddle.net/Sampath_Madhuranga/e4cqnz6h/28/

我已经对布局进行了调整，您可以在其中定义表格结构并更新内联样式。

试试这个代码。

【讨论】：

  • @Noman Ahmad，上面我已经为你提供了答案。检查并让我知道它现在是否有效。谢谢。
【解决方案3】：

对所有尺寸应用百分比值而不是像素值，或对所有元素（例如字体大小、边距等）使用vw（例如：- 0.5vw）值。

有时这可能有效。 请告诉我结果。

谢谢

【讨论】：

  • 我已经尝试了所有关于不同字体/边距尺寸单位的可能性。它给出了相同的结果。
猜你喜欢
  • 2013-09-16
  • 2019-12-02
  • 2015-11-11
  • 1970-01-01
  • 2013-08-09
  • 1970-01-01
  • 1970-01-01
  • 2017-04-28
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode