我遇到一个问题，我在媒体查询中应用到我的电子邮件的字体大小不一致。在某些情况下，它工作正常，但在其他情况下，它会被忽略。有没有其他人遇到过这个或者可以看到我可能做错了什么？
这是CSS：
.stack {
display:block!important;
width:100%!important;
max-width:inherit;
height:auto;
}
.stackB {
max-width:100%!important;
display:block!important;
width:100%!important;
margin: auto;
}
.imgStack {
width:100%!important;
padding-right:0;
padding-left:0;
}
.mobSp {
display:block!important;
}
.w100p {
width:100%!important;
min-width: 350px;
}
.imgFull {
width:100%!important;
height:auto!important;
}
.rPad-0 {
padding-right:0!important;
}
.lPad-0 {
padding-left:0!important;
}
.copy2 {
padding:0px 10% 0px 10%;
width:100%
}
.banner {
width:100%;
padding-left:20%;
padding-right:20%;
}
.hero{
width: 90%!important;
}
.headline{
width:92%;
}
.oneupimg {
width: 92%;
}
.oneupcopy{
width: 92%;
}
.oneup50{
width: 92%;
}
h2 {
font-family: 'Arial';
font-size: 16pt!important;
color: #002855;
padding: 0;
line-height: 16pt!important;
font-weight: bold;
}
h3 {
font-family: 'Arial';
font-size: 15pt!important;
color: #002855;
padding: 0;
line-height: 18pt!important;
font-weight: bold;
}
p a {
color: #1a7ead;
font-size:12pt!important;
}
p {
font-size: 12pt!important;
}
}
@media screen and (max-width:400px){
.stack {
display:block!important;
width:100%!important;
max-width:inherit;
height:auto;
}
.stackB {
max-width:100%!important;
display:block!important;
width:100%!important;
margin: auto;
}
.imgStack {
width:100%!important;
padding-right:0;
padding-left:0;
}
.mobSp {
display:block!important;
}
.w100p {
width:100%!important;
min-width: 350px;
}
.imgFull {
width:100%!important;
height:auto!important;
}
.rPad-0 {
padding-right:0!important;
}
.lPad-0 {
padding-left:0!important;
}
.copy2 {
padding:0px 10% 0px 10%;
width:100%
}
.banner {
width:100%;
padding-left:20%;
padding-right:20%;
}
.hero{
width: 90%!important;
}
.headline{
width:92%;
}
.oneupimg {
width: 92%;
}
.oneupcopy{
width: 92%;
}
.oneup50{
width: 92%;
}
h2 {
font-family: 'Arial';
font-size: 16pt!important;
color: #002855;
padding: 0;
line-height: 16pt!important;
font-weight: bold;
}
h3 {
font-family: 'Arial';
font-size: 15pt!important;
color: #002855;
padding: 0;
line-height: 18pt!important;
font-weight: bold;
}
p a {
color: #1a7ead;
font-size:12pt!important;
}
p {
font-size: 12pt!important;
}
}
table {
border-spacing: 0;
border: 0;
}
td {
padding: 0;
}
p {
font-family: 'Arial';
font-size: 10pt;
line-height: 12pt;
color: #63666a;
}
img {
border: 0;
}
h1 {
font-family: 'Georgia';
font-size: 20pt;
color: #002855;
padding: 0;
line-height: 20pt;
}
h2 {
font-family: 'Arial';
font-size: 12pt;
color: #002855;
padding: 0;
line-height: 12pt;
font-weight: bold;
}
h3 {
font-family: 'Arial';
font-size: 14px;
color: #002855;
padding: 0;
line-height: 23px;
font-weight: bold;
}
p a {
color: #1a7ead;
}
这个模块的工作原理：
<!-- CTA banner module -->
<tr>
<td>
<table width="600" role="presentation" align="center" valign="middle" bgcolor="#002855" style="background-color: #002855; padding: 10px 0px 10px 0px;">
<tr>
<!--[if (gte mso 9) | (IE)]>
<tr height="10px style="border:0;" ></tr>
<! [endif] -->
<td class="banner" width="600px" style="padding: 0px 11% 20px 11%;">
<h1 align="center" style="color:#41b6e6; font-size: 20px; padding-bottom: 0px;">
Breakfast is just the start.
</h1>
<p align="center" style="color: #FFFFFF; padding-bottom: 10px;">Copy copy copy copy copy copy</p>
<center><a rel="noopener" target="_blank" href="URL" style="background-color: #FDC661; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 40px; color: #002855; display: inline-block; mso-padding-alt: 0;">
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i>
<![endif]-->
<span style="mso-text-raise: 15pt;">Connect to well-being support</span>
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%;"> </i>
<![endif]-->
</a></center>
</td>
</tr>
</table>
</td>
</tr>
<!--[if (gte mso 9) | (IE)]>
<tr height="10px style="border:0;" ></tr>
<! [endif] -->
<!-- end CTA banner module -->
此模块不工作：
<!-- half image 1-up -->
<tr>
<td>
<table class="oneup50" align="center" valign="middle" style="width: 550px; vertical-align: middle; background-color: #FFFFFF; border:0; padding-bottom: 0;" role="presentation" dir="ltr">
<tr>
<td class="stackB" style="padding-bottom:0; display: inline-block;">
<table>
<tr>
<td>
<a href="URL"><img class="imgStack" style="width:287px; border: 0;" src="image" alt="Breakfast sandwich featuring rustic English Muffin and many toppings"></a>
</td>
</tr>
</table>
</td>
<td class="stack" valign="middle" align="center" width="263" style="height:219px; border:0; padding-bottom: 0; display: inline-block; vertical-align: middle!important;">
<table role="presentation" valign="middle" style="border: 0; vertical-align: middle; display:inline-block;">
<tr>
<td valign="middle" style="height: 218px; vertical-align: middle;" height="218">
<table style="display:inline-block;">
<tr>
<td>
<center>
<h2 style="padding: 0 20% 0 20%; line-height: 12pt; font-weight: bold;">
Make-ahead Breakfast Sandwich
</h2>
<p style="padding: 0 20% 10px 20%; line-height: 12pt;">
A hearty beginning for busy weekday mornings.
</p>
<a rel="noopener" target="_blank" href="URL" style="background-color: #a7a8aa; font-size: 12px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 40px; color: #ffffff; display: inline-block; mso-padding-alt: 0;">
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i>
<![endif]-->
<span style="mso-text-raise: 15pt;">See the recipe</span>
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%;"> </i>
<![endif]-->
</a>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end half image 1-up -->
我认为这可能与我的内联样式有关，所以我在一些 p 标签上删除了它，但这似乎没有做任何事情。然后添加 !important 有一些效果但不是全部。 Litmus 中的呈现还表明，一个模块可能在一个电子邮件客户端中工作，但在另一个电子邮件客户端中不能工作——并非相同的模块在每个客户端中都失败。如果你们中的任何人以前处理过这个问题或找到了解决办法，请告诉我，谢谢！
这里是一个非常复杂和具体的模板，所以我无法为您解决所有问题。
当您遇到此类问题时，通常是因为某个元素对于屏幕而言太宽，并且电子邮件软件会自动缩小该部分以适合屏幕。
通常为了最好的堆叠/响应行为，我们会在主容器上使用内联块而不是块。
你需要尽可能多地内联，只依赖一个你想要逐步增强的
<style>确保图像具有响应性。例如，您可以将它们内联设置为
style="width:100%;height:auto;"style="max-width:100%"表格宽度是另一个需要注意的地方。我不确定你的外部结构是什么来对此发表评论，但你应该使用 max-width:600px 或类似的，以及 Outlook 的后备。内表通常应该使用百分比。