响应式字体大小在电子邮件中不起作用
Responsive font size not working in email
我似乎无法让我的响应字体大小在我创建的电子邮件中工作。问题在于 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;">2.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;
}
}
我做错了什么?
您的代码似乎运行良好,请尝试选择仅包含 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。调整结果框大小查看效果
所以终于成功了。将带有媒体查询的 span class 标签添加到固定为
的元素
<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">2.72<span></p>
</th>
我似乎无法让我的响应字体大小在我创建的电子邮件中工作。问题在于 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;">2.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;
}
}
我做错了什么?
您的代码似乎运行良好,请尝试选择仅包含 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。调整结果框大小查看效果
所以终于成功了。将带有媒体查询的 span class 标签添加到固定为
的元素<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">2.72<span></p>
</th>