logo标签列表

响应式HTML电子邮件：Outlook

htmlcssoutlookresponsive-designhtml-email
6
我制作了一个 HTML 邮件模板，旨在实现响应式设计。它在不同的电子邮件客户端和移动设备上都显示得很完美。但是在 Outlook 上，它被拉伸到 100％，这绝对不太好，因为标题栏的宽度为 600 像素。
我知道 Outlook 不支持 max-width 属性。但仅使用 width 会导致移动浏览器显示错误。
所以，我的问题基本上是：我应该怎么做/更改模板才能使其响应式，并仍然以最大宽度 600px 显示？
以下是代码。首先是附加的 CSS（更易读），第二个是内联 CSS（应当在发送电子邮件时使用）。使用http://beaker.mailchimp.com/inline-css来进行内联渲染。
 <!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>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>
    /* ------------------------------------- 
        GLOBAL 
------------------------------------- */
* { 
    margin:0;
    padding:0;
}
* { font-family:Arial, Verdana, "Times New Roman";}

img { 
    max-width: 100%; 
}
.collapse {
    margin:0;
    padding:0;
}
body {
    -webkit-font-smoothing:antialiased; 
    -webkit-text-size-adjust:none; 
    width: 100%!important; 
    height: 100%;
    background:#F4F3F4;
}


/* ------------------------------------- 
        ELEMENTS 
------------------------------------- */
a { color: #2BA6CB;}

p.callout {
    padding:15px;
    background-color:#ECF8FF;
    margin-bottom: 15px;
}
.callout a {
    font-weight:bold;
    color: #2BA6CB;
}


/* ------------------------------------- 
        BODY 
------------------------------------- */
table.body-wrap { width: 100%;}


/* ------------------------------------- 
        TYPOGRAPHY 
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
line-height: 1.1; margin-bottom:15px; color:#000;
font-family:Arial, Verdana, "Times New Roman";
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }

h1 { font-weight:200; font-size: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}

.collapse { margin:0!important;}

p, ul { 
    margin-bottom: 10px; 
    font-weight: normal; 
    font-size:14px; 
    line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}

ul li {
    margin-left:5px;
    list-style-position: inside;
}


/* --------------------------------------------------- 
        RESPONSIVENESS
        Nuke it from orbit. It's the only way to be sure. 
------------------------------------------------------ */

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
    display:block!important;
    max-width:600px!important;
    margin:0 auto!important; /* makes it centered */
    clear:both!important;
    padding:0!important;
}

/* This should also be a block element, so that it will fill 100% of the .container */
.content {
    padding:0 5px 5px 5px;
    max-width:600px;
    margin:0 auto;
    display:block; 
}

/* Let's make sure tables in the content area are 100% wide */
.content table { 
    width: 100%; 
    background:#FFF; 
    border: solid 1px #d9d9d9; 
}


/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }

</style>

</head>

<body>

<table class="body-wrap">
    <tr>
        <td></td>
        <td class="container" bgcolor="#F4F3F4">
            <div class="content">
            <p style="color:#666; margin:0; padding:0; font-size:10px;"><a href="{email_url}" style="color:#666; margin:0; padding:0;">Klik hier</a> om deze e-mail online te bekijken.</p>
            <table bgcolor="#FFFFFF" style="text-align:left;">
                <tr>
                    <td>
                        <p><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" /></p>

                        <!-- Callout Panel -->
                        <p class="callout">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#">Do it Now! &raquo;</a>
                        </p><!-- /Callout Panel -->
                        <?php if (empty($posts)) { ?>
                            <p style="padding: 15px;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
                        <?php } else { ?>
                        <table cellpadding="5" style="padding: 15px;">
                            <?php foreach ($posts as $post) { setup_postdata($post); ?>
                                <tr>
                                    <td><a href="<?php echo get_permalink(); ?>"><img width="75" src="<?php echo newsletter_get_post_image($post->ID); ?>" alt="image"></a></td>
                                    <td valign="top">
                                    <a href="<?php echo get_permalink(); ?>"><h3><?php the_title(); ?></h3></a></td>
                                </tr>
                            <?php } ?>
                        </table>
                        <?php } ?>      

                        <br/>
                        <br/>                           

                    </td>
                </tr>
                <tr style="margin:0 15px;">
                    <td align="center" style="border-top: solid 1px #d9d9d9; padding:5px 0;" >
                        <p>
                            <a href="http://twitter.com/Topografie">Twitter</a> |
                            <a href="https://www.facebook.com/TopografieindeKlas">Facebook</a> |
                            <a href="{unsubscription_url}">Geen nieuws e-mails meer ontvangen</a>
                        </p>
                    </td>
                </tr>
            </table>
            </div>

        </td>
        <td></td>
    </tr>
</table><!-- /BODY -->

</body>
</html>

内联CSS：

<!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" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
<head style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">



</head>

<body style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;background: #F4F3F4;width: 100%;">

<table class="body-wrap" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;width: 100%;">
    <tr style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
        <td style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;"></td>
        <td class="container" bgcolor="#F4F3F4" style="margin: 0 auto;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;display: block;max-width: 600px;clear: both;">
            <div class="content" style="margin: 0 auto;padding: 0 5px 5px 5px;font-family: Arial, Verdana, &quot;Times New Roman&quot;;max-width: 600px;display: block;">
            <p style="color: #666;margin: 0;padding: 0;font-size: 10px;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 10px;font-weight: normal;line-height: 1.6;"><a href="{email_url}" style="color: #666;margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">Klik hier</a> om deze e-mail online te bekijken.</p>
            <table bgcolor="#FFFFFF" style="text-align: left;margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
                <tr style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                    <td style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                        <p style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;"><img src="http://topografieindeklas.nl/brandingfiles/headerAlgemeen600px.jpg" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;max-width: 100%;"></p>

                        <!-- Callout Panel -->
                        <p class="callout" style="margin: 0;padding: 15px;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 15px;font-weight: normal;font-size: 14px;line-height: 1.6;background-color: #ECF8FF;">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;font-weight: bold;">Do it Now! &raquo;</a>
                        </p><!-- /Callout Panel -->
                        <?php if (empty($posts)) { ?>
                            <p style="padding: 15px;margin: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">Here you can start to write your message. Be polite with your readers! Do not forget the subsject of this message.</p>
                        <?php } else { ?>
                        <table cellpadding="5" style="padding: 15px;margin: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
                            <?php foreach ($posts as $post) { setup_postdata($post); ?>
                                <tr style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                                    <td style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;"><a href="&lt;?php echo get_permalink(); ?&gt;" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;"><img width="75" src="&lt;?php echo newsletter_get_post_image($post-&gt;ID); ?&gt;" alt="image" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;max-width: 100%;"></a></td>
                                    <td valign="top" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                                    <a href="&lt;?php echo get_permalink(); ?&gt;" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;"><h3 style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 500;font-size: 27px;"><?php the_title(); ?></h3></a></td>
                                </tr>
                            <?php } ?>
                        </table>
                        <?php } ?>      

                        <br style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                        <br style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">                         

                    </td>
                </tr>
                <tr style="margin: 0 15px;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                    <td align="center" style="border-top: solid 1px #d9d9d9;padding: 5px 0;margin: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;">
                        <p style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;">
                            <a href="http://twitter.com/Topografie" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;">Twitter</a> |
                            <a href="https://www.facebook.com/TopografieindeKlas" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;">Facebook</a> |
                            <a href="{unsubscription_url}" style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;color: #2BA6CB;">Geen nieuws e-mails meer ontvangen</a>
                        </p>
                    </td>
                </tr>
            </table>
            </div>

        </td>
        <td style="margin: 0;padding: 0;font-family: Arial, Verdana, &quot;Times New Roman&quot;;"></td>
    </tr>
</table><!-- /BODY -->

</body>
</html>
我理解的是否正确，您是将响应式CSS放在内联中？您的响应式代码应该出现在电子邮件头部的屏幕大小相关媒体查询中。 - samanthasquared
https://dev59.com/T3_aa4cB1Zd3GeqPyA_a#23346010 - davidcondrey
2个回答
6
尝试将您的模板包装在一个表格中，该表格的width设置为100％，具有水平排列的三个单元格（TD），其中将中心单元格设置为width="600"（使用HTML属性而非CSS设置宽度）。将两侧的单元格保留为空，没有任何宽度信息。 这是获得max-width行为的仅限于HTML的方法。
示例：http://jsfiddle.net/YcwM7/ 
<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">This cell should be a maximum width of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table>
1

关于这个问题，已经有几个问题被提出，普遍共识是在电子邮件样式方面，限制自己使用 HTML2 并尽量不依赖 CSS 以获得最佳的跨客户端结果。以下链接都是过去回答的 SO 问题：

是否有与 CSS max-width 相当的适用于 HTML 邮件的属性?

CSS 样式在 Outlook 2010 中无法工作？

然而，Outlook 有自己的条件语句，因此您可以为 Outlook 创建一个单独的样式规则集：

是否有适用于 Outlook 的条件性 CSS If 语句？

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接