文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >将标准HTML和JS转换为在电子邮件中工作

问将标准HTML和JS转换为在电子邮件中工作
EN

Stack Overflow用户
提问于 2018-06-15 04:59:40
回答 2查看 35关注 0票数 0

我已经创建了以下用于发送电子邮件的HTML。我想知道如何让它工作，以便图像的样式规则与页眉和页脚中的灰色背景规则一起被遵循。

​

代码语言：javascript
复制
p {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}

@media only screen and (max-width: 500px) {
p {
font-family: 'Roboto', serif;
font-size: 6vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}

.headerandfooter {
background-color: #5c5c5c;
width: 100%;
}

body, html {
    max-width: 100%;
    padding: 0vw;
    margin: 0vw;
}

.headerlogo {
max-width: 40%; 
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}

@media only screen and (max-width: 500px) {
.headerlogo {
max-width: 60%; 
padding:2vh;
display: block;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
</style>

<style>
.icons {
width: 10%;
max-width: 10%; 
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}

@media only screen and (max-width: 500px) {
.icons {
width: 30%;
max-width: 30%; 
padding:1vh;
display: block;
margin-left: auto;
margin-right: auto;
}
}

.col-container {
display: table;
float: left;
width: 100%;
padding: 1vh;
background-color: #5c5c5c;
}

.column {
float: left;
width: 50%;
}

h1 {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}

@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}

h6 {
font-family: 'Roboto', serif;
font-size: 1vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}

@media only screen and (max-width: 500px) {
h6 {
font-family: 'Roboto', serif;
font-size: 3vw;
text-align: center;
color: #000000;
padding-left: 1vh;
padding-right: 1vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}

</style>
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Style Will Be Linked" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<div class="headerandfooter">
<img class="headerlogo" src="LOGO" draggable="false" alt="Logo">
</div>
<br>

<div class="emailcontent">
<h1>Email Header</h1>
<p>Email Test Content</p>
</div>

<br>
<div class="headerandfooter">
<div class="col-container">
<div class="column">
<a href="ICON1URL"> <img class="icons" src="ICON1IMGURL" draggable="false" alt="ICON1"></a>
</div>
<div class="column">
<a href="ICON2URL"> <img class="icons" src="ICON2IMGURL" draggable="false" alt="ICON2"> </a>
</div>
</div>
<div>
<h6>©<script>document.write(new Date().getFullYear());</script><br><br></h6>
</div>
</div>

​

如果你运行它，代码可以在web上运行，但不能在电子邮件中正确呈现，图像可以显示，但CSS都不能。

提前感谢:)

javascript
html
email
EN

回答 2

Stack Overflow用户

发布于 2018-06-15 05:09:07

许多电子邮件客户端，如(Outlook，Yahoo，Gmail)将会去除样式，除非是内联。样式必须内联才能正确呈现电子邮件模板。

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<style type="text/css">
    p {
    font-family: 'Roboto', serif;
    font-size: 2vw;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    padding-left: 1vh;
    padding-right: 1vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }

    @media only screen and (max-width: 500px) {
    p {
    font-family: 'Roboto', serif;
    font-size: 6vw;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    padding-left: 1vh;
    padding-right: 1vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }
    }

    .headerandfooter {
    background-color: #5c5c5c;
    width: 100%;
    }

    body, html {
        max-width: 100%;
        padding: 0vw;
        margin: 0vw;
    }

    .headerlogo {
    max-width: 40%; 
    padding:2vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    }

    @media only screen and (max-width: 500px) {
    .headerlogo {
    max-width: 60%; 
    padding:2vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    }
    </style>
    .icons {
    width: 10%;
    max-width: 10%; 
    padding:1vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    @media only screen and (max-width: 500px) {
    .icons {
    width: 30%;
    max-width: 30%; 
    padding:1vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    }

    .col-container {
    display: table;
    float: left;
    width: 100%;
    padding: 1vh;
    background-color: #5c5c5c;
    }

    .column {
    float: left;
    width: 50%;
    }

    h1 {
    font-family: 'Roboto', serif;
    font-size: 2vw;
    text-align: center;
    color: #000000;
    padding-left: 1vh;
    padding-right: 1vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }

    @media only screen and (max-width: 500px) {
    h1 {
    font-family: 'Roboto', serif;
    font-size: 8vw;
    text-align: center;
    color: #000000;
    padding-left: 1vh;
    padding-right: 1vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }
    }

    h6 {
    font-family: 'Roboto', serif;
    font-size: 1vw;
    text-align: center;
    color: #000000;
    padding-left: 1vh;
    padding-right: 1vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }

    @media only screen and (max-width: 500px) {
    h6 {
    font-family: 'Roboto', serif;
    font-size: 3vw;
    text-align: center;
    color: #000000;
    padding-left: 1vh;
    padding-right: 1vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }
    }
</style>
<div class="headerandfooter">
<img class="headerlogo" src="LOGO" draggable="false" alt="Logo">
</div>
<br>

<div class="emailcontent">
<h1>Email Header</h1>
<p>Email Test Content</p>
</div>

<br>
<div class="headerandfooter">
<div class="col-container">
<div class="column">
<a href="ICON1URL"> <img class="icons" src="ICON1IMGURL" draggable="false" alt="ICON1"></a>
</div>
<div class="column">
<a href="ICON2URL"> <img class="icons" src="ICON2IMGURL" draggable="false" alt="ICON2"> </a>
</div>
</div>
<div>
<h6>©<script>document.write(new Date().getFullYear());</script><br><br></h6>
</div>
</div>
</body>enter code here
票数 0
EN

Stack Overflow用户

发布于 2018-06-15 05:19:10

电子邮件不支持常规的CSS内部样式标签，你不能使用一些东西，如负边距，绝对位置和其他一些东西，他们不会在电子邮件客户端工作。这就是原因，许多人仍然在电子邮件中使用标准表。您可以使用所有元素，但最好将样式内联到每个特定元素。仅支持系统字体。Roboto只有在Android手机上才能使用，以防你选择使用它。所有其他设备默认使用serif。媒体查询在电子邮件中不起作用。你必须使用一些带有大小和浮点的技巧来实现一些人所说的响应式电子邮件。电子邮件服务Gmail/yahoo mail和客户端outlook/apple mail等将剥离所有不是内联的外部CSS。并且它们中的每一个可能呈现不同的东西。当您尝试使用此代码通过电子邮件发送测试服务时，他们所做的只是剥离CSS并将其内联添加到您的HTML中。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50865853

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档