我对一个负责任的电子邮件简单的代码无法正常工作。当我预览它在我的Android或在Dreamweaver它仍然是600个像素,我正在滚动条。我不是想在Gmail或Yahoo进行查看。我在做什么错误或缺什么?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css" data-premailer="ignore">
@media screen and (max-width:550px) {
table[class="wrapper"] {
width: 100% !important;
}
td[id="content"] {
width: 100% !important;
}
img[class="tulips”] {
width:100% !important;
height: auto !important;
}
}
</style>
</head>
<body>
<table width="600" border="0" class="wrapper">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td id="content">hello</td>
</tr>
</table>
<table width="100%" border="0">
<tr>
<td id="content"><img src="https://lh3.googleusercontent.com/-EfoZBXkd-H0/VIcj6laLtaI/AAAAAAAAAhM/z67q37qNBho/w600-h438-no/images-12-9-14.jpg" alt="Tulips" width="600 px" style="display: block; padding: 0" class="tulips"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
看看你的CSS为你的img标签。引号郁金香后一种错误的。它改成这样:
img[class="tulips"] {
width:100% !important;
height: auto !important;
}