Question

我正在尝试编写响应式设计电子邮件的代码 - 我已经在这里梳理过，找不到任何有用的东西。我真的没有看到我的@media查询的任何部分通过 - 图像保持我在@media查询中编码的大小，而不是在浏览器中调整大小。我编码的字体的移动风格也没有坚持。这是一些代码：

<style type"text/css">
body {background-color: #e5e5e5}
p {
    font-size: 13px; 
    font-family: verdana; 
    line-height: 21px;
    color:#4B5460;
     }
a {
    font-family: verdana; 
    font-weight: bold; 
    text-decoration: underline; 
    color: #4B5460;
}
.footer_link {
    font-weight: normal;
    text-decoration: none;
    color:#0c5bba;
    font-size: 11px;
}

@media screen and (max-width:480px) {
    .graf_font {
        font-size: 16px;}
    }
    .reg_button {
        max-width:200px;
    }
    .mobile_hide {
        display: none;
    }
    .chiclets {
        max-width: 100px;
    }
    .snapshot {
        max-width:75px;
    }
}
</style>

如果您需要更多代码，请告诉我 - 我是初学者，所以我知道我错过了一些明显的东西！

谢谢！

Answer 1

看起来你有一个额外的结束括号。

.graf_font {
    font-size: 16px;} /* <-- remove this bracket */
}

同时检查以确保您的电子邮件客户端甚至支持媒体查询。 https://litmus.com/help/email-clients/media-query-support/

Answer 2

电子邮件不完全支持最大宽度。我发现使用百分比是一个有用的替代方案（例如宽度= 80％）。如果你可以让图像在移动图像上占据一定比例的屏幕或表格单元而不是特定的像素宽度，那么它可能会更成功。如果您仍未取得成功，请尝试在CSS之后添加！important。

此外，您还需要内联样式，因为很多内容会被不同的电子邮件客户端剥离。

我还建议您查看https://litmus.com/community。这是一个新的免费资源，包含很多关于电子邮件设计的最新信息以及比我更了解电子邮件设计的人。

媒体查询不适用于电子邮件

2 个答案: