html - 响应式媒体在 Gmail 的电子邮件模板中不起作用
问题描述
我已经到处寻找答案。我正在使用 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>
我想通过在移动视图中制作全宽来编写媒体查询以制作一些文本和图像中心。
解决方案
@media 屏幕和(最大宽度:767px){}
试试这个为我工作
推荐阅读
- python - 如何使用 Python 在运行时网页中进行调试
- javascript - React + D3:如何访问对象的状态和道具?(在事件触发的函数内)a
- javascript - Slick Carousel 自动播放视频 slide1
- apache-spark - 使用 pyspark 批处理作业从 Kafka 读取最新记录
- kubernetes - 如何使用 UnexpectedAdmissionError 恢复 pod
- python-3.x - 如何显示数据框列中出现次数最多的行?
- python - 如果我使用在线 IDE,是否需要 SFTP?
- node.js - 几个带有快递服务器的反应应用程序[已解决]
- mysql - 我有一个名为 contacts 的数据库和一个名为 person 的表,SELECT 语句中的语法有什么问题?
- javascript - 如何将参数传递给使用 ES6 类定义的 React 组件