为响应HTML电子邮件堆叠表格
我对这封邮件很陌生，但我已经搜索了好几天了，仍然无法破解这封邮件。我想这两个图像堆叠时，缩小窗口和背景变成橙色，因为我有它下面。我有一种感觉，那就是我的桌子是嵌套的为响应HTML电子邮件堆叠表格,html,html-table,html-email,Html,Html Table,Html Email,我对这封邮件很陌生，但我已经搜索了好几天了，仍然无法破解这封邮件。我想这两个图像堆叠时，缩小窗口和背景变成橙色，因为我有它下面。我有一种感觉，那就是我的桌子是嵌套的 <!DOCTYPE html> <html lang="en"> <body> <head> <style type="text/css"> @media screen and (max-width: 400px) {
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<style type="text/css">
@media screen and (max-width: 400px) {
.content {
background-color: #DF6618;
width: 100% !important;
height: auto !important;
}
.contentSmall {
width: 100%;
height: auto;
}
}
</style>
</head>
<table width="600px" class="content">
<tr>
<td>
<table width="300px" class="contentSmall">
<tr>
<img src="http://2.bp.blogspot.com/_FkAI_ee_eBA/SASnSymg3fI/AAAAAAAAAIA/E6UODcxSoTY/s400/300px-Helix_nebula.jpg"; width="300"; border="1px";/>
</tr>
</table>
</td>
<td>
<table width="300px" class="contentSmall">
<tr>
<img src="http://2.bp.blogspot.com/_FkAI_ee_eBA/SASnSymg3fI/AAAAAAAAAIA/E6UODcxSoTY/s400/300px-Helix_nebula.jpg"; width="300"; border="1px";/>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
@媒体屏幕和屏幕（最大宽度：400px）{
.内容{
背景色：#DF6618；
宽度：100%！重要；
高度：自动！重要；
}
.小{
宽度：100%；
高度：自动；
}
}
@media screen and (max-width: 400px) {
.content {
background-color: #DF6618;
width: 100% !important;
height: auto !important;
}
table, tbody, tr, th, td {
display: block
}
.contentSmall {
width: 100%;
height: auto;
}
}
您还可以尝试查看响应电子邮件框架。以下是一些您也可以尝试修改的内容。首先，我将研究HTML语义。图像不是表格数据，不应在表格中使用。我强烈建议您查看引导，并使用自己的媒体查询提供必要的附加规则。我绝对不会将引导用于电子邮件。因为您“不熟悉此电子邮件内容”，我将查看不同客户端在HTML电子邮件中支持哪些功能。例如，你的所有风格都将被Gmail屏蔽，因为它们位于