Question

我的响应式电子邮件的简单代码无效。当我在我的机器人或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>

Answer 1

查看你的css以获取你的img标签。郁金香之后的引号是错误的。将其更改为：

img[class="tulips"] {
  width:100% !important; 
  height: auto !important;
}

响应式电子邮件中的媒体查询无效

1 个答案: