html - 插入响应式 HTML 作为 gmail 签名
问题描述
我创建了一个 html 响应式电子邮件签名，并希望将其设置为在 Gmail 中使用。我在网上找到了几篇关于如何做到这一点的文章，但它并没有使它具有响应性。请参阅下面的代码，因为屏幕会最小化图像更改。
我已经关注了这个链接： https ://www.youtube.com/watch?v=CejHfSH9zhY但我得到的只是 gmail 链接的桌面版本。当我从手机发送电子邮件时，我希望显示签名的移动版本。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
<style type="text/css">
body {
font-family:'Open Sans';
}
p {
margin:0;
}
@media only screen and (max-width: 600px) {
.emailImageDesktop {
display:none;
}
.dividerDesktop {
display:none;
}
#mainStructure {
max-width:100% !important;
min-width:320px;
}
.deviceWidth {
width:100% !important;
float:left;
}
.noPadding {
padding-left:0 !important;
padding-right:0 !important;
}
.pb20 {
padding-bottom:20px;
}
.disclaimerText {
max-width:390px !important;
}
}
@media only screen and (max-width: 502px) {
.emailImageDesktop {
display:none;
}
.dividerDesktop {
display:none;
}
#mainStructure {
max-width:100% !important;
min-width:320px !important;
}
.deviceWidth {
width:100% !important;
float:left;
}
.noPadding {
padding-left:0 !important;
padding-right:0 !important;
}
.pb20 {
padding-bottom:20px;
}
.disclaimerText {
max-width:390px;
}
}
@media only screen and (max-width: 320px) {
.emailImageDesktop {
display:none;
}
.dividerDesktop {
display:none;
}
#mainStructure {
max-width:100% !important;
min-width:320px !important;
}
.deviceWidth {
width:100% !important;
float:left;
}
.noPadding {
padding-left:0 !important;
padding-right:0 !important;
}
.pb20 {
padding-bottom:20px;
}
.disclaimerText {
max-width:320px !important;
}
}
@media only screen and (min-width: 601px) {
.emailImageMobile {
display:none;
}
.dividerMobile {
display:none;
}
}
@media only screen and (max-width: 480px) {
table#canspamBar td {
font-size:14px !important;
}
table#canspamBar td a {
display:block !important;
margin-top:10px !important;
}
}
</style>
</head>
<body>
<table id="mainStructure" style="max-width:930px;" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="deviceWidth" width="342">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right:30px;padding-bottom:30px;">
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">Dominic Colenso</span>
</p>
<br>
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">M</span> <span style="font-size: 10pt; color: #152c46;"><a href="tel:07813925938" style="text-decoration:none;color:#152c46;">+44 (0)7813 925 938</a></span>
</p>
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">T</span> <span style="font-size: 10pt; color: #152c46;"> <a href="tel:03330504036" style="text-decoration:none;color:#152c46;">+44 (0)3330 50 40 36</a></span>
</p>
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">E</span> <span style="font-size: 10pt; color: #152c46;"> <a href="mailto:dominic@inflow.global" style="text-decoration:none;color:#152c46;">dominic@inflow.global</a></span>
</p>
<p><span style="color: #36a9e1; font-weight: bold; font-size: 10pt;">W</span> <span style="font-size: 10pt; color: #152c46;"><a href="https://www.inflow.global" target="_blank" style="text-decoration:none;color:#152c46;">https://www.inflow.global</a></span>
</p>
</td>
<td valign="middle">
<img src="https://www.pepperdogdesign.co.uk/images/inflow%20logo_2x.png" width="136" height="104" alt="In Flow Logo">
</td>
</tr>
</table>
</td>
<td width="6" class="deviceWidth noPadding pb20" align="left" style="padding-left:20px;padding-right:20px;">
<img src="https://www.pepperdogdesign.co.uk/images/divider%20desktop_2x.png" class="dividerDesktop" alt="divider%20desktop_2x.png"><img src="https://www.pepperdogdesign.co.uk/images/divider%20mobile_2x.png" class="dividerMobile" alt="divider%20mobile_2x.png">
</td>
<td class="deviceWidth pb20">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right:20px;">
<span style="color: #36a9e1; font-size: 10pt;">Follow me:</span>
<br><a href="https://twitter.com/dominiccolenso" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/twitter_2x.png" style="padding-right: 5px; border: 0;" alt="Twitter"></a><a href="https://www.linkedin.com/in/dominiccolenso/" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/linked%20in_2x.png" alt="LinkedIn" style="border: 0;"></a>
</td>
<td>
<img src="https://www.pepperdogdesign.co.uk/images/dominic_2x.png" alt="Dominic Colenso">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="deviceWidth" style="padding-bottom:20px;" colspan="3">
<a href="http://www.thebookaboutimpact.com/launch" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/banner%20desktop_2x.png" style="border: 0; max-width: 930px;" width="930" height="202" class="emailImageDesktop" alt="In Flow Banner"></a>
<a href="http://www.thebookaboutimpact.com/launch" target="_blank"><img src="https://www.pepperdogdesign.co.uk/images/banner%20mobile_2x.png" style="border: 0; max-width: 100%;" width="390" height="398" class="emailImageMobile" alt="In Flow Banner"></a>
</td>
</tr>
<tr>
<td class="disclaimerText" style="color:#8995a2;font-size:9pt;font-weight:bold;" colspan="3">
In Flow Training Limited is registered in England and Wales with registered Number: 09111119, having its registered office at 2 Forest Farm Business Park, Fulford, York, YO19 4RH. If you are not the intended recipient of this email, please notify the sender as soon as possible, delete it from your systems and do not disclose its contents to anyone else.
</td>
</tr>
</table>
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF;border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px;padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060;font-family:Helvetica, Arial, sans-serif;font-size:11px;line-height:150%;padding-right:20px;padding-bottom:5px;padding-left:20px;text-align:center;">
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
<br><a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a> <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
<br>*|LIST:ADDRESSLINE|*
<br>
<br>*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>关于如何做到这一点的任何想法？
提前致谢。
解决方案
推荐阅读
- c# - 数据表转换错误方法“ToString”没有重载需要1个参数
- user-interface - CkEditor：Image2（增强图片）插件简化上传流程
- ios - 如何在现有实体的核心数据关系属性中添加新对象
- meteor - 你怎么知道你是否在 Meteor 的方法调用中？
- python - 使用模板渲染实现 flask_jwt_extended
- python-3.x - 如何找到时间序列数据之间的相关性并在python中绘制图表
- java - 谷歌广告关闭后返回默认语言
- css - 如何编写 css 选择器以从元标记中获取描述
- python - 将图像添加到 Pygoocanvas
- c# - 发送电子邮件在服务器端不起作用