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

Question

我开发了一个 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>

score 0 · Accepted Answer

<!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>

score 0 · Accepted Answer

<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/

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

试试这个代码。

score 0 · Accepted Answer

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

有时这可能有效。请让我知道结果。

谢谢

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

3 回答 3

Related

Reference