不使用@media查询的字体大小？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不使用@media查询的字体大小？相关的知识，希望对你有一定的参考价值。
目标是根据屏幕大小调整大小的按钮，而不使用@media查询，因为电子邮件是使用特定工具中途建立的，而主要的style集是不可编辑的。
这意味着无法为该按钮设置特定于内容的style标记，因为android的Gmail应用程序将ignore all secondary style tags。
我发现应该可以使用Viewport typography，但由于某些原因并不重要我尝试过，Android版本的应用程序的字体大小不会改变。
我怀疑屏幕分辨率是一回事（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>
还有什么我可以尝试一下吗？
答案
我不认为有真正的文本有效的解决方案。
但是你可能会得到一张图片 - 虽然不是很优雅：
<body>
<p> </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>以上是关于不使用@media查询的字体大小？的主要内容，如果未能解决你的问题，请参考以下文章