时间戳

首页 > 解决方案 > 如何创建响应邮件

html - 如何创建响应邮件

问题描述

我必须创建一个响应式电子邮件，但我很难做移动部分，因为大多数邮件管理系统（gmail、yahoo、thunderbird、hotmail ......）都没有解释标签我尝试过，但即使在这里也是响应式部分不读取或解释文本，作为最后一个选项，我选择使用“vw”模式，因此大小根据设备的宽度进行调整，但现在我的客户希望 onDesktop 文本的大小保持不变，并且只有增加onMobile，因为它太小......我该怎么办？

我为我的实际邮件创建了这个代码：

<!DOCTYPE html
    PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>
  </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
</head>

<body style="display: block; margin: 0px; padding: 0;font-family: 'Lato', sans-serif; font-size: 20px; text-align: center;box-sizing: border-box;">
  <div style="background-color: #ffffff; width: 100%; position: relative; box-sizing: border-box; font-size: 1vw; text-align: center;">
    <div style="width: 100%; height: 50px; background-color: #00859b;"></div>
    <h1 style="font-family: 'Merriweather', serif; text-align: center; font-weight: 600; color: #000000; font-size: 4vw">CI STIAMO PREPARANDO…&lt;/h1>
    <h2 style="font-weight: 600; letter-spacing: 1px; font-family: 'Merriweather', serif; color: black; font-size: 2.5vw; margin-block-start: 0.83em; margin-block-end: 2em; line-height: 1;">Ti chiederai per cosa? Per il TUO compleanno!</h2>
    <p>{{Contatto: Nome}},<br> 2 settimane e si aggiungerà un anno in più, un anno che porterà con sé i riflessi della saggezza. </p>
    <p>Sì…stiamo parlando del tuo <strong>compleanno!</strong></p>
    <p>Ti invitiamo al <strong>Cantavespri</strong>, per festeggiare in uno dei salotti <strong>più esclusivi di Palermo.</strong></p>
    <p><i><strong>Scegli la qualità</strong></i> e trasforma il tuo evento in una <i><strong>serata indimenticabile.</strong></i></p>
    <p>Contattaci e scopri le <strong>offerte speciali</strong> che abbiamo riservato per te e per il tuo evento speciale.</p>
    <br>

  </div>
  <p style="font-size: 20px;width: 100%; text-align: center;">Contattaci qui per maggiori informazioni
    <span><a href="https://www.facebook.com/cantavespri/"><img src="https://storage.googleapis.com/spuntolab-storage/GENERALI/Mail%20Di%20Ritorno/Immagini/Facebook.png"
                    alt="Cantavespri Palermo facebook" width="25" height="25"></a></span>
    <span><a href="https://www.instagram.com/cantavespri/"><img src="https://storage.googleapis.com/spuntolab-storage/GENERALI/Mail%20Di%20Ritorno/Immagini/Instagram.png"
                    alt="Cantavespri Palermo facebook" width="20" height="20"></a></span>
  </p><br>
  <div style="width: 100%; text-align: center;">
    <a href="https://cantavespri-palermo.bitrix24.site/omaggio/" target="_blank" style="padding: 5px 20px; border-radius: 10px; border: 2px solid #252935; text-decoration: none; font-size: 16px; color: #252935;">Scopri di più!</a>
  </div> <br><br><br><br>
  <hr style="margin-top: 3%; margin-bottom: 2%; margin-block-end: 0em;">


  <!--Firma del cliente-->
  <div style="width: 100%; text-align: center;">
    <div style="width: 100%;text-align: center; margin: auto;">
      <div>
        <div style="width: 100%; text-align: center; margin-top: 1%;">
          <img src="https://storage.googleapis.com/spuntolab-storage/Cantavespri%20-%20Palermo/Landing%20Page/Immagini/Cantavespri%20-%20Palermo.jpg" height="100">
        </div>
        <div style="display: inline-block; ">
          <div style="margin-bottom: 10px;width: 100%; text-align: center;">
            <div style="color: #383a35;font-family: 'Alata', 'Helvetica';font-size: 17px; line-height:1.3;">
              Cantavespri<br> Vicolo Valguarnera, 90133 Palermo PA
            </div>
          </div>
          <div style="display: flex; justify-content: center; align-items: center; width: 100%; text-align: center;">
            <div>
              <a href="https://www.facebook.com/cantavespri/"><img src="https://storage.googleapis.com/spuntolab-storage/GENERALI/Mail%20Di%20Ritorno/Immagini/Facebook.png" alt="Cantavespri Palermo facebook" width="50" height="50"></a>
            </div>
            <div>
              <a href="https://www.instagram.com/cantavespri/"><img src="https://storage.googleapis.com/spuntolab-storage/GENERALI/Mail%20Di%20Ritorno/Immagini/Instagram.png" alt="Cantavespri Palermo facebook" width="45" height="45"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <br>
  <!--Fine Firma cliente-->



  <div style="width: 100%; height: 50px; background-color: #00859b;"></div>
  <div id="footer">
    <div>
      <div id="regolamento">
        <p style="color: #000000; background-color: #ffffff; font-family: 'Merriweather', serif; font-size: 9px; font-weight: 200; letter-spacing: 1px; padding: 1% 5%; text-align: center;">
          Ai sensi del Regolamento (UE) 2016/679 si precisa che le informazioni contenute in questo messaggio sono riservate e ad uso esclusivo del destinatario. Qualora il messaggio in parola Le fosse pervenuto per errore, La preghiamo di eliminarlo senza copiarlo
          e di non inoltrarlo a terzi, dandocene gentilmente comunicazione. Grazie.<br>
          <a style="color: #0054a5;" href="#">Annulla l'iscrizione</a>&nbsp;per non ricevere più email da parte nostra.
        </p>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

标签： htmlcssemailresponsive-designresponsive

解决方案

推荐阅读