? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  ? ? ? ? ? ? | ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? What we do? | ? ? ? ? ? ? ? ? ? ? ? ? ? ? | ? ? ? ? ? ? ? ? ? ? ? ? ? ? We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized. ? ? ? ? ? ? | ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? | ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? | ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? | ? ? ? ?
CSS
现在，所有需要用到的部分都设计好了，接下来我们需要在标题栏部分增加一些模式。首先为markup增加整体风格。插图谷歌网页字体，其余部分将包含我们为邮件主题、html、表格等等设计的模式。
关于网页字体的小提示：根据Campaign Monitor，邮件客户端对网页字体的支持有限，这以为着不是所有客户端都支持网页字体。
@import "http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css";
html,body {
? ? background-color:#fff;
? ? margin:0;
? ? padding:0
}
html {
? ? width:100%
}
body {
? ? margin:0;
? ? padding:0;
? ? -webkit-text-size-adjust:none;
? ? -ms-text-size-adjust:none
}
table {
? ? border-spacing:0;
? ? border-collapse:collapse
}
table td {
? ? border-collapse:collapse
}
table tr {
? ? border-collapse:collapse
}
img {
? ? display:block!important
}
br,strong br,b br,em br,i br {
? ? line-height:100%
}
a {
? ? text-decoration:none
}
.button a {
? ? font-size:14px;
? ? font-family:'Lato',sans-serif;
? ? color:#fff;
? ? font-weight:300;
? ? background:transparent
}
接下来，让我们为特别的邮件客户群增加独特风格。这能让每一种不同的群体都有不同的风格。
/* OUTLOOK CLASS*/
.ExternalClass {
? ? background-color:#fff;
? ? width:100%
}
.ExternalClass,.ExternalClass font,.ExternalClass td,.ExternalClass p,.ExternalClass span,.ExternalClass div {
? ? line-height:100%
}
.ReadMsgBody {
? ? width:100%;
? ? background-color:#fff
}
/* YAHOO MAIL CLASS */
.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span {
? ? border-bottom:none!important
}
/* MAILCHIMP CLASS */
.default-edit-image {
? ? height:20px
}
媒体查询
到了媒体查询设计的步骤，我们需要在640px视窗中使用百分率增加并调整每个部分和元素的尺寸。
@media only screen and (max-width: 640px) {
body {
? ? width:auto!important
}
table[class="col1"] {
? ? width:29%;
}
table[class="col2"] {
? ? width:47%;
? ? text-align:left
}
table[class="col3_one"] {
? ? width:64%;
? ? text-align:left;
}
table[class="col3"] {
? ? width:100%;
? ? text-align:center;
}
table[class="col-600"] {
? ? width:450px
}
table[class="insider"] {
? ? width:90%
}
img[class="images_style"] {
? ? width:60%;
? ? height:auto
}
.margin{
margin-left: 25px;
margin-right: 25px;
}
}
在最后的CSS环节，我们将开始为480px视窗增加媒体查询。我们设计的大部分独立元素和部分将被设置为100%。
@media only screen and (max-width: 480px) {
body {
? ? width:auto!important
}
table[class="col1"] {
? ? width:100%;
}
table[class="col2"] {
? ? width:100%;
? ? text-align:left
}
table[class="col3"] {
? ? width:100%;
? ? text-align:center
}
table[class="col3_one"] {
? ? width:80%;
? ? text-align:center;
? ? margin: 0 20px 0 0;
}
table[class="col-600"] {
? ? width:290px
}
table[class="insider"] {
? ? width:82%!important
}
img[class="images-style"] {
? ? width:60%
}
.button { width: 40%; display: block; }
a.read-more { text-align: center; display: block;}
}
总结
通过以上步骤，各位就能成功设计响应式邮件模板了。不难看出，我们所有的整体风格都使用了inlineCSS。(来源：视觉中国)
切图网（qietu.com）提供优质的psd转邮件模板制作，并且开发了一款免费、开源的邮件模板css框架——快邮，可以快速搭建一个响应式邮件。
