余杭网站设计:如何使用媒体查询创建响应式通讯模板

2019.01.15

945

余杭网站设计

电子邮件客户端,如Outlook(Windows)、Mail(OSX)等。使用不同的HTML引擎。许多人有不同的规则。话虽如此,有些CSS可能会工作,而有些则可能不起作用。

因此,在制作电子邮件模板时,强烈建余杭网站设计议使用不同的方法。许多电子邮件客户端完全删除头部和删除样式,而有些支持有限的内联和内部样式的格式设置。对许多人来说,传统的餐桌布局是最好的选择。

如需参考,请阅读“运动监视器”和“Emailology”。

  • Photoshop中创建的虚拟图像
  • 社交媒体图标
  • 时间和耐心

无CSS

  • 查看演示
  • 下载源文件

我们的文件结构将由一个IMG文件夹和一个HTML文件组成,因为这次我们将执行内部CSS:

  • index.html – this will serve as our main file
  • img folder – for our image

标记:HTML中的建筑设计

我们的HTML文档以DOCTYPE开头,然后是头部、标题和正文部分。然后,我们将把链接添加到我们的谷歌字体-“Pacifico”。我们还将在后面的头部部分添加CSS。因此,让我们继续将其添加到index.html文件中。





Email Newsletter Template

对于Body标记,我们将设置页边距,然后将属性选择器Yahoo=“FIX”设置为“FIX”。

为了解释这个属性,让我给您提供关于Yahoo的快速信息。根据竞选监测,雅虎!邮件忽略媒体查询。为了解决这个问题,我们需要通过使用属性选择器来使用一个棘手的解决方案。

通过向Yahoo属性添加“FIX”值,它可以让我访问媒体查询的通用选择器。要了解这方面的更多信息,可以查看本文。

对于表和图像元素,我们还将为响应外观添加类设备宽度。在我们的标题部分,我们将包括两个分隔图像和一个余杭网站设计标志。

现在我们已经设置了标题,让我们继续添加横幅图像和文本标记。

对于本部分,我们将使用上面提供的资源上的文件img-banner.jpg。标记与除了边界之外的头部的结构相同。除了添加边界完成类之外,我们还将添加Border-LR类(这将仅在左侧和右侧添加边框)以及DeviceWidth类。

对于横幅文本,我们将给它一个108 px的高度,并将所有文本对齐到中心。文本将有一个横幅-txt类。

LEARN MORE

对于Products部分,我们需要对齐两列。继续创建彼此相邻的两个表,并给每个列48%的宽度。我余杭网站设计们还将添加H2和H2标记以及它们各自的类,然后,稍后将在我们的CSS代码中添加样式。

Our Products

Product No. 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Product No. 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

优惠券部分将有相同的布局结构,就像特殊优惠部分,但将有自己的造型类。

Check our site for coupons

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

LEARN MORE

这时候,你一定有了这样的东西。

最终产品-电子邮件

CSS教程部分

现在我们有了我们的标记结构,现在我们可以开始向头部添加不同的样式,使其看起来很好,并且响应桌面和移动视图。

让我们首先为我们的一般元素添加样式,例如主体、图像、按钮和表。对于我们的身体元素,我们将设置为100%宽余杭网站设计度的响应外观。

对于我们的表,我们将其设置为边框折叠,以设置表边框是否折叠为单个边框,还是像标准HTML中那样分离。这将是后面的标志和按钮,这是相当不言自明的。

body {
 width: 100%;
 background-color: #fff;
 margin: 0;
 padding: 0;
 -webkit-font-smoothing: antialiased;
 font-family: Georgia, Times, serif;
 }
table {
 border-collapse: collapse;
 }
td#logo {
 margin: 0 auto;
 padding: 14px 0;
 }
img {
 border: none;
 display: block;
 }
a.blue-btn {
 display: inline-block;
 margin-bottom: 34px;
 border: 3px solid #3baaff;
 padding: 11px 38px;
 font-size: 12px;
 font-family: arial;
 font-weight: 700;

 color: #3baaff;
 text-decoration: none;
 text-align: center;
 }
a.blue-btn:hover {
 background-color: #3baaff;
 color: #fff;
 }
a.white-btn {
 display: inline-block;
 margin-bottom: 30px;
 border: 3px solid #fff;
 background: transparent;
 padding: 11px 38px;
 font-size: 12px;
 font-family: arial;
 font-weight: 700;
 color: #fff;
 text-decoration: none;
 text-align: center;
 }
a.white-btn:hover {
 background-color: #fff;
 color: #3baaff;
 }

在我们的边境,我们有两个班。第一个是边界完整类,它将设置所有边界(上、下、左、右),而第二类边界-LR将只设置左和右的边框。

.border-complete {
 border-top: 1px solid #dadada;
 border-left: 1px solid #dadada;
 border-right: 1px solid #dadada;
 }
.border-lr {
 border-left: 1px solid #dadada;
 border-right: 1px solid #dadada;
 }

对于h2、h2和段落标签的元素,我们将添加颜色样式、文本对齐和一系列填充,以使它们在屏幕上看起来很好。

#banner-txt {
 color: #fff;
 padding: 15px 32px 0;
 font-family: arial;
 font-size: 13px;
 text-align: center;
 }
h2#our-products {
 font-family: Pacifico;
 margin: 23px auto 5px;
 font-size: 27px;
 color: #3baaff;
 }
h2.our-products {
 font-family: arial;
 font-size: 15px;
 color: #7c7b7b;
 }
p.our-products {
 text-align: center;
 font-family: arial;
 color: #7c7b7b;
 font-size: 12px;
 padding: 10px 10px 24px;
 }
h2.special {
 margin: 0;
 color: #fff;
 color: #fff;
 font-family: Pacifico;
 padding: 15px 32px 0;
 }
p.special {
 color: #fff;
 font-size: 12px;
 color: #fff;
 text-align: center;
 font-family: arial;
 padding: 0 32px 10px;
 }
h2#coupons {
 color: #3baaff;
 text-align: center;
 font-family: Pacifico;
 margin-top: 30px;
 }
p#coupons {
 color: #7c7b7b;
 text-align: center;
 font-size: 12px;
 text-align: center;
 font-family: arial;
 padding: 0 32px;
 }

#socials {
padding-top: 12px;
 }
p#footer-txt {
 text-align: center;
 color: #303032;
 font-family: arial;
 font-size: 12px;
 padding: 0 32px;
 }
#social-icons {
 width: 28%;
 }

此时,您已经有了相同的完美外观,就像PSD的设计。

使用媒体查询进行响应性外观

为了使我们的电子邮件模板响应,我们将开始添加一些较小设备的媒体查询。这是一种使HTML和CSS响应浏览器的设备宽度的技术。为此,添加以下代码。

@media only screen and max-width 640px {
 body[yahoo] .deviceWidth {
 width: 440px !important;
 padding: 0;
 }
body[yahoo] .center {
 text-align: center !important;
 }
#social-icons {
 width: 40%;
 }
}
@media only screen and max-width 479px {
 body[yahoo] .deviceWidth {
 width: 280px !important;
 padding: 0;
 }
body[yahoo] .center {
 text-align: center !important;
 }
#social-icons {
 width: 60%;
 }
}

最后的思考

最新案例

联系电话 400-6065-301

建站咨询 星星-总监

投诉