Question

这个电子邮件的新内容，但我搜索和搜索了几天，仍然无法破解这个。我希望缩小窗口时两个图像堆叠，而BG将变为橙色，如下所示。我感觉这是我嵌套表格的方式。

<!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>

Answer 1

将表格元素显示属性更改为阻止，如下所示：

        @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;
            }
        }

您还可以尝试查看Zurb Ink的响应式电子邮件框架。这里有一些templates您也可以尝试修改。

堆叠响应式HTML电子邮件的表格

1 个答案: