响应式字体大小在电子邮件中不起作用答案

【问题标题】：Responsive font size not working in email响应式字体大小在电子邮件中不起作用
【发布时间】：2018-11-15 08:18:03
【问题描述】：

我似乎无法让我的响应式字体大小在我正在创建的电子邮件中工作。问题在于outlook、gmail、aol。

这是 HTML

<th class="small-2 large-2 columns" valign="middle" style="Margin: 0 auto; background-color: #E7E7E7; border: 2px solid #ffffff; color: #0a0a0a; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; min-height: 85px; padding: 0; padding-bottom: 16px; padding-left: 0 !important; padding-right: 0 !important; padding-top: 20px; text-align: left; width: 80.66667px;">
   <p class="field text-center" style="Margin: 0; Margin-bottom: 10px; color: #666666 !important; font-family: 'Open Sans', sans-serif; font-size: 8px; font-weight: normal; line-height: 1.75; margin: 0; margin-bottom: 2px; padding: 0; text-align: center;">Price</p>
   <p pardot-region="" class="number text-center" style="Margin: 0; Margin-bottom: 10px; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: bold; line-height: 1.75; margin: 0; margin-bottom: 10px; padding: 0; text-align: center;">$512.72</p>
</th>

这是我稍后使用基础内联工具内联的 CSS

.financial-table th p.field {
  color: #666666 !important;
  margin-bottom: 2px;
  font-size: 8px;
}

.financial-table th p.number {
  font-size: 10px;
  color: #333333;
  font-weight: bold;
}

@media only screen and (min-width:500px){

  .financial-table th p.number {
    font-size: 16px !important;
  }
  .financial-table th p.field {
    font-size: 12px !important;
  }
}

我做错了什么？

【问题讨论】：

Open Sans 不适用于 Outlook 或 Gmail。都不支持网络字体。

标签： css html-email zurb-ink

【解决方案1】：

所以终于搞定了。将带有媒体查询的 span 类标签添加到用

固定的元素

<th class="small-2 large-2 columns" valign="middle" style="Margin: 0 auto; background-color: #E7E7E7; border: 2px solid #ffffff; color: #0a0a0a; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; min-height: 85px; padding: 0; padding-bottom: 16px; padding-left: 0 !important; padding-right: 0 !important; padding-top: 20px; text-align: left; width: 80.66667px;">
   <p class="field text-center" style="Margin: 0; Margin-bottom: 10px; color: #666666 !important; font-family: 'Open Sans', sans-serif; font-size: 8px; font-weight: normal; line-height: 1.75; margin: 0; margin-bottom: 2px; padding: 0; text-align: center;"><span class="mobile-number">Price</span></p>
   <p pardot-region="" class="number text-center" style="Margin: 0; Margin-bottom: 10px; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: bold; line-height: 1.75; margin: 0; margin-bottom: 10px; padding: 0; text-align: center;"><span class="mobile-number">$512.72<span></p>
</th>

【讨论】：

这是一个奇怪的解决方法。你说Issues is with outlook, gmail, aol，这修复了哪一个？ Gmail？
@Syfer 所有这些。使用类与内联样式时，响应式样式如何工作。内联样式不总是优先的吗？
内联确实优先，除非头部有 CSS 并且重要的覆盖它，我问的原因是我从来不需要额外的跨度来让响应部分工作。瞄准正确的班级总是对我有用。很高兴知道这对你有用。老实说，我不是内联的粉丝。

【解决方案2】：

您的代码似乎运行良好，请尝试仅使用 p.field 和 p.number 选择段落

p.field {
  color: #666666 !important;
  margin-bottom: 2px;
  font-size: 8px;


}

p.number{
  font-size: 10px;
  color: #333333;
  font-weight: bold;
}

@media only screen and (min-width:500px){

  p.number {
    font-size: 16px !important;
  }
  p.field {
    font-size: 12px !important;
  }
}

这是实时代码。 jsfiddle。调整结果框大小看看效果

【讨论】：

试过了，但仍然遇到问题。我应该提到这是用于电子邮件的。老实说，我不确定响应式样式如何与内联 CSS 配合使用。