时间戳

首页 > 解决方案 > 电子邮件模板的内联样式，使其像从 col-md-6 到 col-12 的引导网格

html - 电子邮件模板的内联样式，使其像从 col-md-6 到 col-12 的引导网格

问题描述

目前我想制作电子邮件模板，我通常用每个内容/行制作我的电子邮件模板，但是这次我必须用模板制作一个电子邮件模板，它在桌面上有 2 列并在移动设备中将其更改为 1 列，如果您像这样应用它，就像引导网格一样：<div class="col-12 col-md-6"></div>但是由于我使用媒体查询制作它，所以当我发送电子邮件时，显然该样式不起作用，因为您只能将内联用于电子邮件模板并且因为媒体查询无法工作在内联样式中，我的模板中断了，有人可以帮我解决这个问题吗？

这是我的 CSS 行：

.col-md-6 {
    display: flex;
    flex-flow: column wrap;
    flex-grow: 6;
    flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    max-width: 50%;
}


@media screen and (max-width: 767px) {
    .col-12 {
        display: flex;
        flex-flow: column wrap;
        flex-grow: 12;
        flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        max-width: 100%;
    }
}

我的目标是在电子邮件成功发送时让它看起来像这样

在桌面

在移动

有人可以帮我解决这个问题吗？

标签： htmlcss

解决方案

可悲的现实是，对电子邮件客户端媒体查询的支持非常有限。您可以在其中添加样式标签和媒体查询，但只有一些基于 Web 的电子邮件客户端会接受它们为有效，甚至那些接受媒体查询的客户端可能仍会阻止 css 的某些属性，并且可能不接受像 flex display 这样的新东西.

推荐阅读