插入自适应HTML作为gmail签名

时间:2019-07-05 22:31:49

标签: html css gmail html-email

我已经创建了一个HTML响应电子邮件签名,并希望将其设置为可在Gmail中使用。我在网上找到了一些有关如何执行此操作的文章,但它并没有使其具有响应能力。由于屏幕上的图像变化最小,请参见下面的代码。

我遵循了以下链接:https://www.youtube.com/watch?v=CejHfSH9zhY,但我得到的只是gmail链接的桌面版本。当我从手机发送电子邮件时,我希望显示签名的手机版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="x-apple-disable-message-reformatting">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
    <style type="text/css">
      body {
        font-family:'Open Sans';
      }
      
      p {
        margin:0;
      }
      
      @media only screen and (max-width: 600px) {
        .emailImageDesktop {
          display:none;
        }
        
        .dividerDesktop {
          display:none;
        }
        
        #mainStructure {
          max-width:100% !important;
          min-width:320px;
        }
        
        .deviceWidth {
          width:100% !important;
          float:left;
        }
        
        .noPadding {
          padding-left:0 !important;
          padding-right:0 !important;
        }
        
        .pb20 {
          padding-bottom:20px;
        }
        
        .disclaimerText {
          max-width:390px !important;
        }
      }
      
      @media only screen and (max-width: 502px) {
        .emailImageDesktop {
          display:none;
        }
        
        .dividerDesktop {
          display:none;
        }
        
        #mainStructure {
          max-width:100% !important;
          min-width:320px !important;
        }
        
        .deviceWidth {
          width:100% !important;
          float:left;
        }
        
        .noPadding {
          padding-left:0 !important;
          padding-right:0 !important;
        }
        
        .pb20 {
          padding-bottom:20px;
        }
        
        .disclaimerText {
          max-width:390px;
        }
      }
      
      @media only screen and (max-width: 320px) {
        .emailImageDesktop {
          display:none;
        }
        
        .dividerDesktop {
          display:none;
        }
        
        #mainStructure {
          max-width:100% !important;
          min-width:320px !important;
        }
        
        .deviceWidth {
          width:100% !important;
          float:left;
        }
        
        .noPadding {
          padding-left:0 !important;
          padding-right:0 !important;
        }
        
        .pb20 {
          padding-bottom:20px;
        }
        
        .disclaimerText {
          max-width:320px !important;
        }
      }
      
      @media only screen and (min-width: 601px) {
        .emailImageMobile {
          display:none;
        }
        
        .dividerMobile {
          display:none;
        }
      }
      
      @media only screen and (max-width: 480px) {
        table#canspamBar td {
          font-size:14px !important;
        }
        
        table#canspamBar td a {
          display:block !important;
          margin-top:10px !important;
        }
      }
    </style>
  </head>
  <body>
    <table id="mainStructure" style="max-width:930px;" width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td class="deviceWidth" width="342">
          <table cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td style="padding-right:30px;padding-bottom:30px;">
                <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">Dominic Colenso</span>
              </p>
              <br>
              <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">M</span> <span style="font-size: 10pt; color: #152c46;"><a href="tel:07813925938" style="text-decoration:none;color:#152c46;">+44 (0)7813 925 938</a></span>
            </p>
            <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">T</span> <span style="font-size: 10pt; color: #152c46;"> <a href="tel:03330504036" style="text-decoration:none;color:#152c46;">+44 (0)3330 50 40 36</a></span>
          </p>
          <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">E</span> <span style="font-size: 10pt; color: #152c46;">  <a href="mailto:dominic@inflow.global" style="text-decoration:none;color:#152c46;">dominic@inflow.global</a></span>
        </p>
        <p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">W</span> <span style="font-size: 10pt; color: #152c46;"><a href="https://www.inflow.global" target="_blank" style="text-decoration:none;color:#152c46;">https://www.inflow.global</a></span>
      </p>
    </td>
    <td valign="middle">
      <img src="https://www.pepperdogdesign.co.uk/images/inflow%20logo_2x.png" width="136" height="104" alt="In Flow Logo">
    </td>
  </tr>
</table>
</td>
<td width="6" class="deviceWidth noPadding pb20" align="left" style="padding-left:20px;padding-right:20px;">
<img src="https://www.pepperdogdesign.co.uk/images/divider%20desktop_2x.png" class="dividerDesktop" alt="divider%20desktop_2x.png"><img src="https://www.pepperdogdesign.co.uk/images/divider%20mobile_2x.png" class="dividerMobile" alt="divider%20mobile_2x.png">
</td>
<td class="deviceWidth pb20">
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding-right:20px;">
      <span style="color: #36a9e1; font-size: 10pt;">Follow me:</span>
      <br><a href="https://twitter.com/dominiccolenso" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/twitter_2x.png" style="padding-right: 5px; border: 0;" alt="Twitter"></a><a href="https://www.linkedin.com/in/dominiccolenso/" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/linked%20in_2x.png" alt="LinkedIn" style="border: 0;"></a>
    </td>
    <td>
      <img src="https://www.pepperdogdesign.co.uk/images/dominic_2x.png" alt="Dominic Colenso">
    </td>
  </tr>
</table>
</td>
</tr>
<tr>
<td class="deviceWidth" style="padding-bottom:20px;" colspan="3">
<a href="http://www.thebookaboutimpact.com/launch" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/banner%20desktop_2x.png" style="border: 0; max-width: 930px;" width="930" height="202" class="emailImageDesktop" alt="In Flow Banner"></a>
<a href="http://www.thebookaboutimpact.com/launch" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/banner%20mobile_2x.png" style="border: 0; max-width: 100%;" width="390" height="398" class="emailImageMobile" alt="In Flow Banner"></a>
</td>
</tr>
<tr>
<td class="disclaimerText" style="color:#8995a2;font-size:9pt;font-weight:bold;" colspan="3">
In Flow Training Limited is registered in England and Wales with registered Number: 09111119, having its registered office at 2 Forest Farm Business Park, Fulford, York, YO19 4RH. If you are not the intended recipient of this email, please notify the sender as soon as possible, delete it from your systems and do not disclose its contents to anyone else.
</td>
</tr>
</table>
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF;border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px;padding-bottom:20px;">
  <table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
    <tr>
      <td align="center" valign="top" style="color:#606060;font-family:Helvetica, Arial, sans-serif;font-size:11px;line-height:150%;padding-right:20px;padding-bottom:5px;padding-left:20px;text-align:center;">
        This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
        <br><a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a>    <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a>    <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
        <br>*|LIST:ADDRESSLINE|*
        <br>
        <br>*|REWARDS|*
      </td>
    </tr>
  </table>
</td>
</tr>
</table>
</center>
</body>
</html>

关于如何执行此操作的任何想法?

谢谢。

0 个答案:

没有答案