如何制作响应式签名邮件

时间：2018-01-23 09:24:14

标签： html css html-email responsive signature

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

来自Dropbox的

此处的文件 www.dropbox.com/sh/z09rlwphzdbzq5c/AABZu1NZCPZ_EEFOUzeAX3JZa?dl=0

＆＃13;
＆＃13; 
.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; }
			}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案:

答案 0 :(得分：0)

@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>

相关问题
最新问题