13306647218
导航
宁波软件定制
解决方案
案例
新闻
服务
联系
宁波定制软件,宁波系统开发
联系 13306647218

一站式宁波app软件定制服务

小程序开发 > 动态 >

宁波网站建设：如何创建响应式电子邮件模板

2019-08-16 13:23:23

宁波网站建设：如何创建响应式电子邮件模板

在手机和平板电脑上阅读电子邮件从未如此简单。就像现代网站一样，电子邮件新闻稿设计需要针对不同的视口进行优化。

想象一下，有一个无响应的电子邮件通讯设计。它可能在桌面设备上看起来不错; 但是，在小屏幕上检查它看起来很糟糕，因为每个元素都未对齐并且列不完整。据EmailMonday称，91％的消费者定期检查移动设备上的电子邮件。这是您应该考虑优化电子邮件模板的原因之一。

宁波网站建设如何优化电子邮件简报设计？虽然您可能会想到使用div和外部CSS编写HTML模板的现代方法，但某些电子邮件客户端（如Outlook和Yahoo Mail）使用不同的方法。

虽然HTML5和CSS3的支持仅限于电子邮件设计，但创建响应式电子邮件模板的最佳方法是采用旧的方式创建布局 - 使用表格，内部CSS，内联CSS和媒体查询。

所有电子邮件客户端是否都支持媒体查询？

虽然大多数电子邮件客户端都支持媒体查询，但仍有一些类似Gmail Android应用程序的支持有限。好的我们仍然可以为表和其他HTML元素添加百分比，以在不同的视口上创建平滑的响应式布局。

为了向您展示如何应用所有这些信息，我将向您展示如何使用表格，内联和外部CSS以及媒体查询来创建响应式电子邮件模板。让我们开始吧。

注意：我已经在Photoshop中为我们的电子邮件模板设计创建了一个模型设计。

电邮模板

入门

在开始之前，我们必须在标题部分添加一些元素。首先，我们将添加一个XHTML doctype，后跟带有xmlns属性的html标记，以指定文档的xml命名空间。其余的是元信息和标题标签。

1
2
3
4
五
6
7
8
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no"/>
  <title>KATAUSTRIA - Email Template</title>
</head>

标记

对于我们的标记，我们将从表开始，并开始在我们的表上添加一些属性。这将包含以下元素：

  • 页眉/横幅

  • 3盒展示

  • 令人敬畏的标题部分

  • 我们做什么部分

  • 准备好新项目部分

  • 定价表

  • 页脚

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<body yahoo="fix">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- START HEADER/BANNER -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END HEADER/BANNER -->
<!-- START 3 BOX SHOWCASE -->
        <tr>
            <td align="center">
            </td>
        </tr>
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END 3 BOX SHOWCASE -->
<!-- START AWESOME TITLE -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END AWESOME TITLE -->
<!-- START WHAT WE DO -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END WHAT WE DO -->
<!-- START READY FOR NEW PROJECT -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END READY FOR NEW PROJECT -->
<!-- START PRICING TABLE -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END PRICING TABLE -->
<!-- START FOOTER -->
        <tr>
            <td align="center">
            </td>
        </tr>
<!-- END FOOTER -->
    </table>
</body>
</html>

横幅和3盒展示部分

对于这两个部分，我们将使用col-600类包装每个部分，以便稍后在CSS上为这两个部分设置宽度。我们将添加一个漂亮的横幅以及我们的徽标和文字。对于我们的三盒展示，我们将使用col3并给它宽度为183.注意我在<td>标签上使用高度来给出一些空间。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!-- START HEADER/BANNER -->
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center" valign="top" background="images/header-background.jpg" bgcolor="#66809b" style="background-size:cover; background-position:top;height="400"">
            <table class="col-600" width="600" height="400" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="40"></td>
        </tr>
        <tr>
            <td align="center" style="line-height: 0px;"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/logo.png" width="109" height="103" alt="logo" />
            </td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:24px; font-weight: bold; letter-spacing: 7px;">EMAIL <span style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:39px; font-weight: 300; letter-spacing: 7px;">TEMPLATE</span>
            </td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Lato', sans-serif; font-size:15px; color:#ffffff; line-height:24px; font-weight: 300;">A creative email template for your email campaigns, promotions <br/>and products across different email platforms.
            </td>
        </tr>
        <tr>
            <td height="50"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END HEADER/BANNER -->
<!-- START 3 BOX SHOWCASE -->
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px; border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="35"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Raleway', sans-serif; font-size:22px; font-weight: bold; color:#2a3a4b;">A creative way to showcase your content</td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Prepare some  flat icons of your choice. You can place your content below.<br/>Make sure it's awesome.
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9; ">
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td>
            <table class="col3"  width="183" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
            <td height="30"></td>
        </tr>
        <tr>
            <td align="center">
            <table class="insider" width="133" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr align="center" style="line-height:0px;">
            <td>
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/icon-about.png" width="69" height="78" alt="icon" />
            </td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Raleway', Arial, sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;">About Us</td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Place some cool text here.</td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="30" ></td>
        </tr>
            </table>
            <table width="1" height="20" border="0" cellpadding="0" cellspacing="0" align="left" >
        <tr>
            <td height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;">
            <p style="padding-left: 24px;">&nbsp;</p>
            </td>
        </tr>
            </table>
            <table class="col3"  width="183" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
            <td height="30"></td>
        </tr>
        <tr>
            <td align="center">
            <table class="insider" width="133" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr align="center" style="line-height:0px;">
            <td>
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/icon-team.png" width="69" height="78" alt="icon" />
            </td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Raleway', sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;">Our Team</td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Place some cool text here.</td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="30"></td>
        </tr>
            </table>
            <table width="1" height="20" border="0" cellpadding="0" cellspacing="0" align="left">
        <tr>
            <td height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;">
            <p style="padding-left: 24px;">&nbsp;</p>
            </td>
        </tr>
            </table>
            <table class="col3" width="183" border="0" align="right" cellpadding="0" cellspacing="0">
        <tr>
            <td height="30"></td>
        </tr>
        <tr>
            <td align="center">
            <table class="insider" width="133" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr align="center" style="line-height:0px;">
            <td>
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/icon-portfolio.png" width="69" height="78" alt="icon" />
            </td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Raleway',  sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;">Our Portfolio</td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr align="center">
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Place some cool text here.</td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="30"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="5"></td>
        </tr>
<!-- END 3 BOX SHOWCASE -->

很棒的标题和我们做的部分

这两个部分仍将使用class col-600，但是我们将在每个内部元素上使用两个不同的类。对于我们很棒的标题部分的第一个图标元素，我们将在文本上使用col1和col3_one。我们稍后会在媒体查询中操纵这两个的大小。

对于我们所做的部分，我们将为每列使用col2。请注意，我使用内联CSS将一些样式放在我们的元素上。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!-- START AWESOME TITLE -->
        <tr>
            <td align="center">
            <table align="center" class="col-600" width="600"  border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" bgcolor="#2a3b4c">
            <table class="col-600" width="600" align="center" width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="33"></td>
        </tr>
        <tr>
            <td>
            <table class="col1" width="183" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
            <td height="18"></td>
        </tr>
        <tr>
            <td align="center">
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="images/icon-title.png" alt="img" width="156" height="136" />
            </td>
        </tr>
            </table>
            <table class="col3_one" width="380"  border="0" align="right" cellpadding="0" cellspacing="0">
        <tr align="left" valign="top">
            <td style="font-family: 'Raleway', sans-serif; font-size:20px; color:#f1c40f; line-height:30px; font-weight: bold;">This title is definitely awesome! </td>
        </tr>
        <tr>
            <td height="5"></td>
        </tr>
        <tr align="left" valign="top">
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#fff; line-height:24px; font-weight: 300;">The use of flat colors in web design is more than a recent trend, it is a style designers have used for years to create impactful visuals. When you hear "flat", it doesn't mean boring it just means minimalist.
            </td>
        </tr>
        <tr>
            <td height="10"></td>
        </tr>
        <tr align="left" valign="top">
            <td>
            <table class="button" style="border: 2px solid #fff;" bgcolor="#2b3c4d" width="30%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="10"></td>
            <td height="30" align="center" style="font-family: 'Open Sans', Arial, sans-serif; font-size:13px; color:#ffffff;"><a href="#" style="color:#ffffff;">Read more</a>
            </td>
            <td width="10"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="33"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END AWESOME TITLE -->
<!-- START WHAT WE DO -->
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px;">
        <tr>
            <td align="center">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="50"></td>
        </tr>
        <tr>
            <td align="right">
            <table class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center" style="line-height:0px;">
            <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="images/icon-responsive.png" width="169" height="138" />
            </td>
        </tr>
            </table>
            <table width="287" border="0" align="left" cellpadding="0" cellspacing="0" class="col2" style="">
        <tr>
            <td align="center">
            <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr align="left">
            <td style="font-family: 'Raleway', sans-serif; font-size:23px; color:#2a3b4c; line-height:30px; font-weight: bold;">What we do?</td>
        </tr>
        <tr>
            <td height="5"></td>
        </tr>
        <tr>
            <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#7f8c8d; line-height:24px; font-weight: 300;">We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized.
            </td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END WHAT WE DO -->

新项目和定价表部分

对于New Project部分，除了col-600之外我不会使用任何其他类，而对于定价表，我们将对每个表使用col2。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!-- START READY FOR NEW PROJECT -->
        <tr>
            <td align="center">
            <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="50"></td>
        </tr>
        <tr>
            <td align="center" bgcolor="#34495e">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="35"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Raleway', sans-serif; font-size:20px; color:#f1c40f; line-height:24px; font-weight: bold;">Ready for new project?</td>
        </tr>
        <tr>
            <td height="20"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Lato', sans-serif; font-size:14px; color:#fff; line-height: 1px; font-weight: 300;">Check out our price below.
            </td>
        </tr>
        <tr>
            <td height="40"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END READY FOR NEW PROJECT -->
<!-- START PRICING TABLE -->
        <tr>
            <td align="center">
            <table width="600" class="col-600" align="center" border="0" cellspacing="0" cellpadding="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="50"></td>
        </tr>
        <tr>
            <td>
            <table style="border:1px solid #e2e2e2;" class="col2" width="287" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
            <td height="40" align="center" bgcolor="#2b3c4d" style="font-family: 'Raleway', sans-serif; font-size:18px; color:#f1c40f; line-height:30px; font-weight: bold;">Small Business Website</td>
        </tr>
        <tr>
            <td align="center">
            <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="20"></td>
        </tr>
 
        <tr align="center" style="line-height:0px;">
            <td style="font-family: 'Lato', sans-serif; font-size:48px; color:#2b3c4d; font-weight: bold; line-height: 44px;">$150</td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td height="15"></td>
        </tr>
        <tr>
            <td align="center">
            <table width="100" border="0" align="center" cellpadding="0" cellspacing="0"   style="border: 2px solid #2b3c4d;">
        <tr>
            <td width="10"></td>
            <td height="30" align="center" style="font-family: 'Lato', sans-serif; font-size:14px; font-weight: 300; color:#2b3c4d;">
            <a href="#" style="color: #2b3c4d;">Learn More</a>
            </td>
            <td width="10"></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="30"></td>
        </tr>
            </table>
            <table width="1" height="20" border="0" cellpadding="0" cellspacing="0" align="left">
        <tr>
            <td height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;">
            <p style="padding-left: 24px;">&nbsp;</p>
            </td>
        </tr>
            </table>
            <table style="border:1px solid #e2e2e2;" class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0">
        <tr>
            <td height="40" align="center" bgcolor="#2b3c4d" style="font-family: 'Raleway', sans-serif; font-size:18px; color:#f1c40f; line-height:30px; font-weight: bold;">E-commerce Website</td>
            </tr>
        <tr>
            <td align="center">
            <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="20"></td>
        </tr>
        <tr align="center" style="line-height:0px;"><td style="font-family: 'Lato', sans-serif; font-size:48px; color:#2b3c4d; font-weight: bold; line-height: 44px;">$289</td>
        </tr>
        <tr>
            <td height="30"></td>
        </tr>
        <tr align="center">
            <td>
            <table width="100" border="0" align="center" cellpadding="0" cellspacing="0"   style=" border: 2px solid #2b3c4d;">
        <tr>
            <td width="10"></td>
            <td height="30" align="center" style="font-family: 'Lato', sans-serif; font-size:14px; font-weight: 300; color:#2b3c4d;">
            <a href="#" style="color: #2b3c4d;">Learn More</a>
        </td>
            <td width="10"></td>
            </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
        <tr>
            <td height="20" ></td>
        </tr>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END PRICING TABLE -->

页脚

对于使用相同col-600的页脚部分，我们将创建三个表格单元格，并为其社交媒体图标指定百分比宽度。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
42
<!-- START FOOTER -->
        <tr>
      <td align="center">
        <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
        <tr>
            <td height="50"></td>
        </tr>
        <tr>
            <td align="center" bgcolor="#34495e" background="images/footer.jpg" height="185">
            <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="25"></td>
        </tr>
        <tr>
            <td align="center" style="font-family: 'Raleway',  sans-serif; font-size:26px; font-weight: 500; color:#f1c40f;">Follow us for some cool stuffs</td>
        </tr>
        <tr>
            <td height="25"></td>
        </tr>
            <table align="center" width="35%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center"  width="30%"  style="vertical-align: top;">
            <a href="https://www.facebook.com/designmodo" target="_blank"> <img src="images/icon-fb.png"> </a>
            </td>
            <td align="center" class="margin" width="30%" style="vertical-align: top;">
            <a href="https://twitter.com/designmodo" target="_blank"> <img src="images/icon-twitter.png"> </a>
            </td>
            <td align="center" width="30%" style="vertical-align: top;">
            <a href="https://plus.google.com/+Designmodo/posts" target="_blank"> <img src="images/icon-googleplus.png"> </a>
            </td>
        </tr>
            </table>
            </table>
            </td>
        </tr>
            </table>
            </td>
        </tr>
<!-- END FOOTER -->
            </td>
        </tr>
            </table>

CSS

现在我们已经设置了所有内容，让我们在标题部分添加一些样式。首先，我们需要为标记添加常规样式。我们将导入Google Web Fonts，其余的将包含我们的body，html，tables等样式。

关于Web字体的一些注意事项：根据Campaign Monitor，电子邮件客户端中对Web字体的支持是有限的。这意味着并非所有可用的客户都支持它们 在此处查看支持Web字体集成的电子邮件客户端的Campaign Monitor 。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@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
}

接下来，让我们为特定的电子邮件客户端类添加一些样式。这将确保为每个类实现我们想要的样式。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 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视口中每个元素和部分的大小。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
42
@media only screen and (max-width: 640px) {
body {
    width:auto!important
}
 
table[class=&amp;amp;quot;col1&amp;amp;quot;] {
    width:29%;
}
 
table[class=&amp;amp;quot;col2&amp;amp;quot;] {
    width:47%;
    text-align:left
}
 
table[class=&amp;amp;quot;col3_one&amp;amp;quot;] {
    width:64%;
    text-align:left;
}
 
table[class=&amp;amp;quot;col3&amp;amp;quot;] {
    width:100%;
    text-align:center;
}
 
table[class=&amp;amp;quot;col-600&amp;amp;quot;] {
    width:450px
}
 
table[class=&amp;amp;quot;insider&amp;amp;quot;] {
    width:90%
}
 
img[class=&amp;amp;quot;images_style&amp;amp;quot;] {
    width:60%;
    height:auto
}
 
.margin{
    margin-left: 25px;
    margin-right: 25px;
}
}

对于最终的CSS，我们将开始为480px视口添加一些媒体查询。我们的大多数元素和部分将设置为100％。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
@media only screen and (max-width: 480px) {
body {
    width:auto!important
}
 
table[class=&amp;amp;quot;col1&amp;amp;quot;] {
    width:100%;
}
 
table[class=&amp;amp;quot;col2&amp;amp;quot;] {
    width:100%;
    text-align:left
}
 
table[class=&amp;amp;quot;col3&amp;amp;quot;] {
    width:100%;
    text-align:center
}
 
table[class=&amp;amp;quot;col3_one&amp;amp;quot;] {
    width:80%;
    text-align:center;
    margin: 0 20px 0 0;
}
 
table[class=&amp;amp;quot;col-600&amp;amp;quot;] {
    width:290px
}
 
table[class=&amp;amp;quot;insider&amp;amp;quot;] {
    width:82%!important
}
 
img[class=&amp;amp;quot;images-style&amp;amp;quot;] {
    width:60%
}
 
.button { width: 40%; display: block; }
a.read-more { text-align: center; display: block;}
 
}

包起来

恭喜！这就是您可以创建响应式电子邮件模板的方法。正如您所看到的，我们的大部分样式都使用了内联CSS。

虽然未来可能会有很多改进，但这是创建电子邮件模板的良好基础。请不要忘记在使用之前删除HTML文件上的所有注释，因为某些电子邮件客户端可能会遇到问题。

希望您在本教程中学到一些东西，并在评论中告诉我您的想法。

宁波网站建设

随机推荐