Размер шрифта без использования @media запросов? - PullRequest
Новая
       16

Размер шрифта без использования @media запросов?

0 голосов
/ 09 ноября 2018

Цель состоит в том, чтобы иметь кнопку, размер которой изменяется в зависимости от размера экрана, без использования @media запросов по причине, по которой электронная почта строится наполовину с помощью специального инструмента, а основной набор style не редактируется.

Это означает, что для кнопки невозможно установить специфичный для содержимого тег style для кнопки, поскольку приложение Gmail для Android игнорирует все дополнительные теги стиля .

Я обнаружил, что это возможно с Типография 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>

Есть что-нибудь еще, что я мог бы попробовать здесь?

1 Ответ

0 голосов
/ 09 ноября 2018

Я не думаю, что есть работающее решение с реальным текстом.

Но вы можете получить вместе с изображением - хотя и не очень элегантно: 

<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 для электронной почты это не весело.

...