我試圖創建一個響應電子郵件template.everything工作正常,除圖像邊框。 我爲圖片和媒體樣式設置了邊框,但在小屏幕中,圖片邊框將會被摺疊。時事通訊邊界錯誤
HTML
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<style type="text/css">
@media only screen and (max-width: 480px) {
.message_mobile {
width: 100% !important;
}
}
</style>
</head>
<body id="message_body" style="background-color:white;" >
<table style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 600px; display: table;" align="center" class="message_mobile"><tbody><tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: hidden;">
<tbody><tr>
<td style="vertical-align:top;text-align:center;">
<div>
<img src="http://www.myfico.com/Images/sample_overlay.gif" alt=" " style="border: 16px solid rgb(196, 45, 196); display: block; width: 100%; padding: 2px; max-width: 94.64882943143813%;" width="auto">
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
輸出(大屏幕)
輸出(小畫面)
爲什麼不使圖像寬度稍微小一點,即90%; ?因爲圖像的寬度是:width + borderwidth因此最終寬度> 100% – user2211216
@ user2211216我們可以減小圖像的寬度。但是寬度需要是響應 – Shin
,如果將它設置爲89%,它可以正常工作,並且響應爲 – user2211216