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

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 。 它是一个新的免费资源，其中包含有关电子邮件设计的最新信息，并且比我更了解电子邮件设计的人。