Question

我正在尝试将html电子邮件转换为响应式。它目前有一个全宽（600px）的标题图像，在它下面有两列，左边是字体，右边是面板。列的宽度不是50/50，更像是70/30。

我想要做的是将标题图像缩小，右手栏包裹在左手下方，但宽度相同。

希望我已经解释得很好 - 这可能吗？

谢谢， JIM

Answer 1

可能会有很大的延迟，但我只是在寻找带有填充的响应性不均匀列的解决方案时注意到了您的问题。我已经设法找到一个没有填充的不均匀列的解决方案。这是：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
        /* resets */
        img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
        table, td { border-collapse: collapse; font-family:Arial, Helvetica, sans-serif; mso-table-lspace:0pt; mso-table-rspace:0pt;}
        body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
        div, p, a, li, td { -webkit-text-size-adjust:none; }
        .ExternalClass * {line-height: 100%} 
        /* resets end */
        .imageFix {display:block; width:100%;}
        .mobile-separator { display: none!important;}
        .smalltext { font-size: 10px }

        @media screen and (min-width: 601px) {
            .container {
                width: 600px!important;
            }
        }
        @media screen and (max-width: 525px) {
            .imageFix {width:100%!important;} 
            .mobile-separator { display: block!important;}
            .deviceWidth { width: 100%!important;}
        }

        /* yahoo only - USELESS FOR NOW */
        @media yahoo {
            body { background-color: #EFEFEF }
        }

    </style>

</head>
<body style="background-color:#EFEFEF; color:#000000;font-family:Arial, Helvetica, sans-serif;">


    <!-- MAIN WRAPPER -->
    <!--[if (gte mso 9)|(IE)]>
    <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
        <tr>
            <td>
    <![endif]-->
    <table class="container" width="100%" cellpadding="0" cellspacing="0" style="background-color:#ffffff; max-width: 600px; margin: 0 auto" bgcolor="#FFFFFF">

        <!-- CONTENT STARTS HERE -->
        <tr>
            <td style="text-align: center; vertical-align: top; font-size: 0;">

            <!-- 1 column no padding -->
            <table width="100%" cellpadding="0" cellspacing="0" class="deviceWidth">
                <tr>
                    <td>
                        <a href="#">
                        <img src="#" class="imageFix"  border="0" width="600" alt="image1" />  

                        <!-- mobile separator - should be hidden on desktop -->
                            <img alt="-" src="separator image 5px x 5px that will match the background" border="0" style="display: block;height: 5px" class="mobile-separator" />
                        </a>
                    </td>
                </tr>
            </table>

            <!-- 2 columns 180px and 420px no padding -->
                <!-- the issue with this is that it shows a 200px centered image on gmail app -->
            <!--[if (gte mso 9)|(IE)]>
            <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="180" valign="top">
            <![endif]-->

            <!--  1st COLUMN -->
            <div style="width: 180px; display: inline-block; vertical-align: top;" class="deviceWidth ">
                <table width="100%" cellpadding="0" cellspacing="0" align="center">
                    <tr>
                        <td>
                            <img src="#" class="imageFix" width="180" border="0" alt="image1" />  
                            <!-- mobile separator - should be hidden on desktop -->
                            <img alt="-" src="separator image 5px x 5px that will match the background" border="0" style="display: block; height: 5px" class="mobile-separator" />
                        </td>
                    </tr>
                </table>
            </div>

            <!--[if (gte mso 9)|(IE)]>
            </td><td width="420">
            <![endif]-->

            <!--  2nd COLUMN -->
            <div style="width: 420px; display: inline-block; vertical-align: top;" class="deviceWidth ">
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <img src="#" class="imageFix" width="420" border="0" alt="image1" />  
                        </td>
                    </tr>
                </table>
            </div>

            <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->    
            <!-- //2 columns 180px and 420px no padding -->


            </td>
        </tr>
        <!-- CONTENT ENDS HERE -->

    </table>
    <!--[if (gte mso 9)|(IE)]>
            </td>
        </tr>
    </table>
    <![endif]-->
    <!-- MAIN WRAPPER END-->

</body>

要记住的一些事项：

我遇到的唯一问题是，我无法在Gmail应用中使用在较小的列中的图像去全宽。
您需要为每个图像设置width属性，尤其是对于较小的列（width =＆＃34; 180＆＃34;在您的情况下）。
我建议使用更大的图片，以便在移动设备上很好地显示

响应式电子邮件 - 不均匀的列？

1 个答案: