Question

我已经开发了HTML Email模板，并且还有2列设计。在我的情况下，一列是图像，另一列是文本，此外，该文本由标题和段落组成。而且由于所有样式都是嵌入式样式，所以我在不同的屏幕上都遇到问题。

图片一是正常屏幕：

图片2用于大屏幕：

所有有关字体的信息如果我减小字体，在某些设备上字体显示很小，而如果增加，两列设计就会中断。

这是我的代码：

volatile const int N = 22;

Answer 1

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

有时候这可能行得通。请让我知道结果。

谢谢

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

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

尝试此代码。

Answer 3

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

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

3 个答案: