5
응답 성이 있어야하는 html 전자 메일 템플릿을 만들었습니다. 그것은 다른 전자 메일 클라이언트 및 모바일에 완벽하게 표시됩니다. 그러나 Outlook에서는 헤더가 600 픽셀 너비이므로 절대적으로 냉담하지는 않습니다.반응 형 html 전자 메일 : outlook
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! »</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 :
몇이에 대한 질문, 그리고 최고의 클라이언트 간 결과에 대한 일반적인 합의가 오면 정말 CSS에 의존하지 않고 HTML2에 자신을 제한하는 것입니다있어왔다<!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, "Times New Roman";">
<head style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<!-- 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, "Times New Roman";">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
</head>
<body style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";-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, "Times New Roman";width: 100%;">
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"></td>
<td class="container" bgcolor="#F4F3F4" style="margin: 0 auto;padding: 0;font-family: Arial, Verdana, "Times New Roman";display: block;max-width: 600px;clear: both;">
<div class="content" style="margin: 0 auto;padding: 0 5px 5px 5px;font-family: Arial, Verdana, "Times New Roman";max-width: 600px;display: block;">
<p style="color: #666;margin: 0;padding: 0;font-size: 10px;font-family: Arial, Verdana, "Times New Roman";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, "Times New Roman";">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, "Times New Roman";width: 100%;background: #FFF;border: solid 1px #d9d9d9;">
<tr style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<p style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";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, "Times New Roman";max-width: 100%;"></p>
<!-- Callout Panel -->
<p class="callout" style="margin: 0;padding: 15px;font-family: Arial, Verdana, "Times New Roman";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, "Times New Roman";color: #2BA6CB;font-weight: bold;">Do it Now! »</a>
</p><!-- /Callout Panel -->
<?php if (empty($posts)) { ?>
<p style="padding: 15px;margin: 0;font-family: Arial, Verdana, "Times New Roman";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, "Times New Roman";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, "Times New Roman";">
<td style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";"><a href="<?php echo get_permalink(); ?>" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;"><img width="75" src="<?php echo newsletter_get_post_image($post->ID); ?>" alt="image" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";max-width: 100%;"></a></td>
<td valign="top" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<a href="<?php echo get_permalink(); ?>" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;"><h3 style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";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, "Times New Roman";">
<br style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
</td>
</tr>
<tr style="margin: 0 15px;padding: 0;font-family: Arial, Verdana, "Times New Roman";">
<td align="center" style="border-top: solid 1px #d9d9d9;padding: 5px 0;margin: 0;font-family: Arial, Verdana, "Times New Roman";">
<p style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";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, "Times New Roman";color: #2BA6CB;">Twitter</a> |
<a href="https://www.facebook.com/TopografieindeKlas" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";color: #2BA6CB;">Facebook</a> |
<a href="{unsubscription_url}" style="margin: 0;padding: 0;font-family: Arial, Verdana, "Times New Roman";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, "Times New Roman";"></td>
</tr>
</table><!-- /BODY -->
</body>
</html>
오전 나는 당신이 당신의 반응 CSS 인라인을두고 있다는 점에서 올바르게 해석? 반응 형 코드는 전자 메일 헤더의 화면 크기에 따른 미디어 쿼리에 나타납니다. – samanthasquared
http://stackoverflow.com/a/23346010/1922144 – davidcondrey