html - 响应式媒体在 Gmail 的电子邮件模板中不起作用

标签 html css html-email

<分区>

我找遍了这个问题的答案。我正在使用 Mailchimp 撰写电子邮件事件。我有一些带有移动样式媒体查询的自定义 CSS。问题是 Gmail 无法识别媒体查询。其他移动电子邮件客户端是,但 Gmail 不是。

我已经联系了 Mailchimp 支持人员,但没有收到任何指导。我查看了 StackOverflow 和其他文章,并尝试实现共享的想法。我运气不好。

感谢任何帮助。谢谢

这是我的电子邮件的 CSS:

我试过属性选择器和类,但都不起作用。

<style type="text/css">
.top-container img {
    display: inline-block;
    margin-right: 30px;
    }
   .content {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    margin-top: 40px;
    width: 60%;
    }
   .content p {
    text-align: left;
   }
   @media only screen and (max-width:600px) {
    .content {
    width: 100%!important;
    }
    .content p {
    text-align: center;
    }
    .top-container img {
    margin-left: auto;
        margin-right: auto;
        display: block;
    }
   }
</style>

我想编写媒体查询,通过在移动 View 中显示全宽来使一些文本和图像居中。

最佳答案

@media 屏幕和(最大宽度:767 像素){}

为我尝试这个工作

关于html - 响应式媒体在 Gmail 的电子邮件模板中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57586944/

上一篇:jquery - 使用 jQuery 访问 css ":after"选择器

下一篇:javascript - 如何通过在 JQuery 中切换来恢复 div 的默认大小?

相关文章:

PHP mySQL 搜索不工作

css - 第二个媒体查询不起作用

iphone - 响应式网站的一页在 iPhone 上模糊/模糊

html - Gmail 字体颜色问题

可在 Firefox 中使用的 HTML 电子邮件签名(图片相关)

html - Css 和 html 生产工具

javascript - 如何在按钮 JQM + HTML5 内对齐图像?

css - 在html中重新定位表格中的文本

html - 如何在 Chrome DevTools 中模拟触摸屏时检查元素?

java - 如何从 Xpages 用 Ja​​va 发送电子邮件?