Question

目标是要根据屏幕尺寸调整按钮的大小，而不使用@media查询，这是由于使用特定工具在电子邮件中途构建了主style集的原因可编辑的。

这意味着无法为按钮设置特定于内容的style标签，因为Android版Gmail应用将ignore all secondary style tags。

我发现Viewport typography可以实现，但是出于某种原因，不管我尝试了什么，Android Gmail应用程序上的字体大小都不会改变。

我怀疑屏幕分辨率是一回事（2960x1440），也可能是我无法在样式中添加内联viewport。

当前按钮代码：

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-radius:3px; background-color:#E4E4E4;">
  <tr>
    <td align="center" valign="middle">
      <a href="google.com" target="_blank" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size: 14px; font-size: 1.4vw; font-weight:bold; line-height: 100%; background-color: #E4E4E4; border: 3px solid #000000; padding: 8px 20px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none; ">CLICK HERE</a>
    </td>
  </tr>
</table>

还有什么我可以在这里尝试的吗？

Answer 1

我认为，没有针对真实文本的有效解决方案。

但是您可能会与图像相处–虽然不是很优雅：

<body>
<p>&nbsp;</p>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-radius:3px; background-color:#E4E4E4;">
  <tr>
    <td align="center" valign="middle">
      <a href="google.com" target="_blank" style="line-height: 100%;"><img src="https://i.stack.imgur.com/Vo7mJ.png" alt="Click Here" style="width:10%; height: auto; min-width:100px; vertical-align: middle; padding: 1.5% 3%; border: 3px solid #000000;  border-radius: 0px; display: inline-block; margin: -1% auto; background-color:#E4E4E4;"/></a>
    </td>
  </tr>
</table>
</body>

电子邮件的HTML不好玩。

不使用@media查询的字体大小？

1 个答案: