问题
I got problem with my email signature. It's not quite responsive. Responsive just for window resize but not for tool's developer chrome
here's files from dropbox 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
回答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>来源：https://stackoverflow.com/questions/48398137/how-to-make-responsive-signature-mail