html - 在邮件中测试时如何使用网格布局修复电子邮件模板响应问题
问题描述
我正在创建一个 HTML 电子邮件模板。我有一个包含 3 列的部分。当我在本地机器上运行它时，我没有遇到任何问题，但是当我将它作为邮件发送时，我遇到了响应问题或其他我能理解的问题。
- 首先，我使用SASS & compiler 将其编译为CSS。
- 制作另一个HTML 文件并获取已编译的 CSS 代码。
- 在 标签中，我将 CSS 代码设置为(Internal CSS)。
- 它在我的本地机器中显示为我想要的。大小设备完美。喜欢
- 当我用（Puts Mail）站点测试它并发送邮件时。在笔记本电脑中，尽管邮件正文大于 500px/600px，但它会显示错误。错误是我的 3 列显示在 1 行中。喜欢：
- 这是我在代码笔中的代码，带有 HTML 和 SASS
https://codepen.io/mrhrifat/pen/xxgBQZd?editors=1100
- 这是我的代码，带有 HTML 和 CSS（与上面的代码相同，但它是内部 CSS 样式。以及从 SASS 编译的 CSS 代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rating</title>
<style>
/*===== 05) Global CSS Section =====*/
.btn,
.container .latest .row .col1 .card-footer button,
.container .latest .row .col2 .card-footer button,
.container .latest .row .col3 .card-footer button {
border: none;
cursor: pointer;
background-color: red;
padding: 15px 30px;
border-radius: 4px;
line-height: 120%;
}
.btn a,
.container .latest .row .col1 .card-footer button a,
.container .latest .row .col2 .card-footer button a,
.container .latest .row .col3 .card-footer button a {
text-decoration: none;
color: white;
font-size: 14px;
line-height: 140%;
text-align: center;
}
/*===== 06) Container Section =====*/
html,
body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 650px;
margin: 0 auto;
/*===== 08) Latest Section =====*/
}
.container .latest .row {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -ms-grid;
display: grid;
grid-template-areas: 'sec1 sec2 sec3';
-ms-grid-columns: auto auto auto;
grid-template-columns: auto auto auto;
}
.container .latest .row .col1 {
padding: 5px;
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: sec1;
text-align: center;
}
.container .latest .row .col1 .card-body small {
display: block;
font-size: 14px;
padding: 10px 10px 0;
}
.container .latest .row .col1 .card-body p {
padding: 10px 5px;
font-size: 14px;
margin: 0;
color: green;
}
.container .latest .row .col1 .card-body span {
border-top: 2px solid black;
padding: 10px 15px;
display: block;
width: 20%;
margin: 0 auto;
}
.container .latest .row .col1 .card-footer button {
padding: 12px 22px;
}
.container .latest .row .col2 {
padding: 5px;
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: sec2;
text-align: center;
}
.container .latest .row .col2 .card-body small {
display: block;
font-size: 14px;
padding: 10px 10px 0;
}
.container .latest .row .col2 .card-body p {
padding: 10px 5px;
font-size: 14px;
margin: 0;
color: green;
}
.container .latest .row .col2 .card-body span {
border-top: 2px solid black;
padding: 10px 15px;
display: block;
width: 20%;
margin: 0 auto;
}
.container .latest .row .col2 .card-footer button {
padding: 12px 22px;
}
.container .latest .row .col3 {
padding: 5px;
-ms-grid-row: 1;
-ms-grid-column: 3;
grid-area: sec3;
text-align: center;
}
.container .latest .row .col3 .card-body small {
display: block;
font-size: 14px;
padding: 10px 10px 0;
}
.container .latest .row .col3 .card-body p {
padding: 10px 5px;
font-size: 14px;
margin: 0;
color: green;
}
.container .latest .row .col3 .card-body span {
border-top: 2px solid black;
padding: 10px 15px;
display: block;
width: 20%;
margin: 0 auto;
}
.container .latest .row .col3 .card-footer button {
padding: 12px 22px;
}
/*===== 15) Media Query Section =====*/
@media screen and (max-width: 365px) {
.latest .row {
grid-template-areas: 'sec1''sec2''sec3' !important;
}
}
/*# sourceMappingURL=style.css.map */
</style>
</head>
<body>
<!-- Container Section Start -->
<div class="container">
<!-- Latest Section Start -->
<section class="latest">
<div class="row">
<div class="col1">
<div class="card">
<div class="card-body">
<small>Rating</small>
<p>
Lorem Ipsum is simply dummy text of typesetting industry.
</p>
</div>
<div class="card-footer">
<button>
<a href="#">Download Now</a>
</button>
</div>
</div>
</div>
<div class="col2">
<div class="card">
<div class="card-body">
<small>Rating</small>
<p>
Lorem Ipsum is simply dummy text of typesetting industry.
</p>
</div>
<div class="card-footer">
<button>
<a href="#">Download Now</a>
</button>
</div>
</div>
</div>
<div class="col3">
<div class="card">
<div class="card-body">
<small>Rating</small>
<p>
Lorem Ipsum is simply dummy text of typesetting industry.
</p>
</div>
<div class="card-footer">
<button>
<a href="#">Download Now</a>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Latest Section End -->
</div>
<!-- Container Section End -->
</body>
</html>