不使用@media查詢的字體大小？

Question

目標是要根據屏幕尺寸調整按鈕的大小，而無需使用@media查詢，這是由於電子郵件是使用特定工具中途構建的，並且主要style集不可編輯。

這意味着無法為按鈕設置特定於內容的style標簽，因為Android版Gmail應用將忽略所有輔助樣式標簽。

我發現Viewport字體應該可以實現，但是由於某種原因，不管我嘗試過什么，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 個解決方案

解決方案1
0 2018-11-09 16:32:33

不使用@media查詢的字體大小？

問題描述

1 個解決方案

解決方案1 0 2018-11-09 16:32:33

解決方案1
0 2018-11-09 16:32:33