html 电子邮件模板中的媒体查询
Media queries in html email templates
正在使用
<style>...</style>
电子邮件 html 中的 和 类 是不允许的，但需要响应式电子邮件。有人可以说出下一个代码的替代方案
<style>
@media (max-width:570px) {
.row-content {
width: 100% !important;
}
}
<style>
？谢谢
媒体查询一般有pretty good support across email clients。有一些限制（比如 Gmail 不理解基于 height 的媒体查询），但这通常不是问题。然而，有一些边缘情况值得了解：
- 移动设备上的 Gmail（iOS 和 Android）在使用非 Gmail 帐户（如 Outlook.com例如电子邮件地址）。
- Android 上的 Yahoo 需要一个空的
<head></head> 标签，因为它会删除它找到的第一个 <head>（及其所有内容）。
对于这些情况，最佳做法通常是选择不同的编码方法，而不是依赖媒体查询，例如 fluid/hybrid 技术或移动优先方法。
正在使用
<style>...</style>
和 类 是不允许的，但需要响应式电子邮件。有人可以说出下一个代码的替代方案
<style>
@media (max-width:570px) {
.row-content {
width: 100% !important;
}
}
<style>
？谢谢
媒体查询一般有pretty good support across email clients。有一些限制（比如 Gmail 不理解基于 height 的媒体查询），但这通常不是问题。然而，有一些边缘情况值得了解：
- 移动设备上的 Gmail（iOS 和 Android）在使用非 Gmail 帐户（如 Outlook.com例如电子邮件地址）。
- Android 上的 Yahoo 需要一个空的
<head></head>标签，因为它会删除它找到的第一个<head>（及其所有内容）。
对于这些情况，最佳做法通常是选择不同的编码方法，而不是依赖媒体查询，例如 fluid/hybrid 技术或移动优先方法。