如何制作响应式签名邮件

Question

我的电子邮件签名有问题。它不是很敏感。仅响应 window 调整大小但不响应工具的开发人员 chrome

这是保管箱中的文件 www.dropbox.com/sh/z09rlwphzdbzq5c/AABZu1NZCPZ_EEFOUzeAX3JZa?dl=0

.background{
    background: url("https://image.ibb.co/cse3Jb/bg_car.png") center no-repeat;
   }

   div[class="wide-version-of-table"] { display:block; }
   div[class="narrow-version-of-table"] { display:none; }
   body { padding:0 !important; margin:0 !important; display:block !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none }

   @media only screen and (max-device-width: 500px), only screen and (max-width:500px) /* The maximum width for the mobile device version. */
   {
    div[class="wide-version-of-table"] { display:none; }
    div[class="narrow-version-of-table"] { display:block; }
    span[class='content-width-img'] img { width: 100% !important; height: auto !important; max-width: 480px !important; }
   }
   @media only screen and (max-device-width: 800px), only screen and (max-width: 800px) {
    table[class='w320'] {
     width: 100% !important;
    }
    th[class='column'] { float: left !important; width: 100% !important; display: block !important; }
   }

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  <title>CarSPA Email</title>
 </head>

 <body class="body" style="padding:0 !important; margin:0 !important; display:block !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none">
 <div class="wide-version-of-table">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <th valign="top" align="center">
    <table width="800" border="0" cellspacing="0" cellpadding="0" class="w320">
     <tr>
      <th>
       <div >
        <table cellpadding="0" cellspacing="0" border="0"  style="font-size:12px; font-family: Arial; line-height: 17px;background: url(bg-car.png) right no-repeat;" width="100%">
          <tr>
           <td class="column">
             <img src="https://image.ibb.co/cosCBw/zdjecie_01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/>
           </td>
           <td class="column" width="90%"  valign="top" style="padding-top: 30px;padding-bottom: 10px;padding-left: 20px;">
              <p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;">
              Karol Nowak<br/>
              <span style="font-weight: normal;">właściciel</span></p>
              <p style="padding-top: 12px;font-size:15px;"><span style="font-weight: bold">cars warsaw</span><br/>
             tel.kom. +48 555 555 555<br/>
             email: emailadres<br/>
              </p>
              <p style="padding-top: 12px;font-size:15px;">
              ul. Frontzka 2<br/>
              77-577 Poland
              </p>
           </td>
           <td class="column"align="right" style="position: relative; padding-right: 5px;">
             <!--<img src="bg-car.png" alt="CarSpa - email"/>-->
            <span><a href="otagowany link"><img src="https://image.ibb.co/cNkcdb/carspa_logo.png" alt="CarSpa - logo" style="margin-bottom: 13px;margin-top: 25px;"/></a>
            </span>
            <span><a href=""><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Facebook" style=""/></a>
            </span>
            <span><a href=""><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/></a>
            </span>
            <span><a href=""><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Youtube" style="padding-right: 0px"/></a>
            </span>
           </td>
          </tr>
        </table>
       </div>
      </th>
     </tr>
    </table>
   </th>
  </tr>
 </table>
 </div>

 <div class="narrow-version-of-table">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <th valign="top" align="center">
     <table width="800" border="0" cellspacing="0" cellpadding="0" class="w320">
      <tr>
       <th>
        <div >
         <table cellpadding="0" cellspacing="0" border="0"  style="font-size:12px; font-family: Arial; line-height: 17px;background: url(bg-car.png) right no-repeat;" width="100%">
          <tr>
           <td class="column">
            <img src="zdjecie-01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/>
           </td>
           <td class="column" width="90%"  valign="top" style="padding-top: 30px;padding-bottom: 10px;padding-left: 20px;">
            <p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;">
             Piotr Zawisza<br/>
             <span style="font-weight: normal;">właściciel</span></p>
            <p style="padding-top: 12px;font-size:15px;"><span style="font-weight: bold">CarSPA Gdynia</span><br/>
             tel.kom. +48 505 505 999<br/>
             email: piotr.zawisza@car-spa.pl<br/>
            </p>
            <p style="padding-top: 12px;font-size:15px;">
             ul. Stryjska 11<br/>
             81-507 Gdynia
            </p>
           </td>
          </tr>
          <tr>
           <td class="column"align="right" style="position: relative;">
            <!--<img src="bg-car.png" alt="CarSpa - email"/>-->
            <span style="margin-left: 100%;">
             <a href=""><img src="carspa-logo.png" alt="CarSpa - Logo" style="margin-bottom: 13px;margin-top: 25px;"/>
             </a>
             <span style="margin-left: 100%">
              <a href=""><img src="icon-fb.png" alt="CarSpa - Facebook" style=""/></a>
              <a href=""><img src="icon-ig.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/></a>
              <a href=""><img src="icon-yt.png" alt="CarSpa - Youtube" style="padding-right: 0px"/></a>
             </span>
            </span>
           </td>
          </tr>
         </table>
        </div>
       </th>
      </tr>
     </table>
    </th>
   </tr>
  </table>
 </div>
 </body>
</html>

https://codepen.io/zaraki12345/pen/RxOoZe

Answer 1

@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
        table[class="responsive_table"] {
            width:100% !important;
        }
        table[class="responsive_table"] td {
            height: auto !important;
        }
        table[id="emailContainer"] {
            max-width: 600px !important;
            width: 95% !important;
        }
}

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
  <tr>
    <td align="center" valign="top">
      <table cellpadding="0" cellspacing="0" width="650" id="emailContainer">
        <tr>
          <td align="center" valign="top">
            <table cellpadding="0" cellspacing="0" width="100%" class="emasilBody">
              <tr> 
                <td align="center">
                  <table cellpadding="0" cellspacing="0" width="200" class="responsiveTable" align="left">
                    <tr>
                      <td align="center">
                        <img src="https://image.ibb.co/cosCBw/zdjecie_01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/>
                      </td>
                    </tr>
                  </table>   
                  <table cellpadding="0" cellspacing="0" width="200" class="responsiveTable" align="left">
                    <tr>
                      <td align="center">
                        <p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;">Karol Nowak<br/><span style="font-weight:normal;">właściciel</span></p>
             <p style="padding-top: 12px;font-size:15px;"><span style="font-weight: bold">cars warsaw</span><br/>tel.kom. +48 555 555 555<br/> email: emailadres</p>
            <p style="padding-top: 12px;font-size:15px;">ul. Frontzka 2<br/>77-577 Poland</p>
                      </td>
                    </tr>
                  </table> 
                  <table cellpadding="0" cellspacing="0" width="200" class="responsiveTable" align="left">
                    <tr>
                      <td align="center">
                        <p style="margin-top:0;"><a href="otagowany link"><img src="https://image.ibb.co/cNkcdb/carspa_logo.png" alt="CarSpa - logo" style="margin-bottom: 13px;"/></a>
            </p>
            <p><a href=""><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Facebook" /></a><a href=""><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/></a><a href=""><img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/></a>
            </p>
                      </td>
                    </tr>
                  </table> 
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

如何制作响应式签名邮件

How to make responsive signature mail

html

css

signature

html-email

responsive