Question

我为客户设计了一个电子邮件签名，首先我通过photoshop在表格上尝试了该签名，但出现了一些问题-td's-之间的间隙等。然后我尝试了stackoverflow社区提供的所有解决方案，但我无法解决。

在那之后，我尝试使用一些基本的html / css编码来实现它，并且在桌面和桌面上的邮件应用程序中都可以正常工作...

但是在移动div中，由于尺寸大小的原因，它会损坏。我需要此代码“响应式”。

是否有关于此代码的简单解决方案？对不起，我的英语不好。

谢谢！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<style media="screen" type="text/css">
	p {
	font-family: "Open Sans Light";
	font-size: 12px;
	color: #434343;
	padding:0;
	margin:0em;
}

</style>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="width:540px; height:230px; background-color:white; display:block;">

  <div style="width:38px; height:230px; background-color:white; float:left; display:block;"><img src="https://i.postimg.cc/nzLxWQZW/leftline.jpg"></img>
  </div>
  
  <div style="width:305px; height:230px; background-color:white; float:left; display:block;">
  		<div style="width:305px; height:86px; background-color:white; float:left; color:#434343;"><p style="font-weight:bold; margin-top:24px; font-size:18px; padding:0; margin-bottom:0;">DAVID MYERS</p><p style="margin:0; padding:0;">Marketing Manager</p>
  		</div>
        <div style="width:305px; height:27px; background-color:white; float:left; display:block;"><img src="https://i.postimg.cc/WzFvNLd6/dot.jpg"></img>
  		</div>
        <div style="width:305px; height:64px; background-color:white; float:left; display:block;">
          <p style="margin:0; padding:0;">P: +972.54.563.1729</p>
          <p style="margin:0; padding:0;">M: +972.54.563.1729</p>
  		</div>
        <div style="width:305px; height:53px; background-color:#f6f6f6; float:left; display:block;">
        <p style="margin-top:12px; margin-bottom:0; margin-left:0; margin-right:0; font-size:10px; font-weight:bold;">www.stayviagem.com</p>
          <p style="padding:0; margin:0; font-size:10px;">85 Broad Street, Suite 28-088, New York, NY 10004</p>
  		</div>
  
  </div>
  
  <div style="width:197px; height:230px; background-color:white; float:left; display:block;">
  		<div style="width:197px; height:178px; background-color:white; 	float:left; display:block;"><img src="https://i.postimg.cc/6pLN5hpS/logo-viagem.jpg"></img></div>
        <div style="width:197px; height:52px; background-color:#461d7b; 	float:left; display:block;">
        
        	<a href="https://www.facebook.com/stayviagem" target="_blank"><div style="width:48px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/8PvSxGQT/facebook.jpg"></img></div></a>
        	<a href="https://www.instagram.com/stayviagem" target="_blank"><div style="width:34px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/jSrbb1tP/instagram.jpg"></img></div></a>
        	<a href="https://www.twitter.com/stayviagem" target="_blank"><div style="width:32px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/9XK2xMkx/twitter.jpg"></img></div></a>
        	<a href="https://www.pinterest.com/stayviagem/" target="_blank"><div style="width:34px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/26XYN8SS/pinterest.jpg"></img></div></a>
        	<a href="https://www.youtube.com/channel/UCWJBkDUX-YwAggoM9zHVmWQ" target="_blank"><div style="width:48px; height:52px; background-color:#200; 	float:left; display:block;"><img src="https://i.postimg.cc/gjCPrSR9/youtube.jpg"></img></div></a>
        
        </div>
  </div>
</div>
</body>
</html>

Answer 1

电子邮件太简单了，无法实现复杂的HTML和CSS代码。您将尝试多年。

不幸的是，即使它似乎确实可以在多种设备上运行，但仍然有如此多的电子邮件客户端，域和设备，因此会有不支持HTML的组合-或者，正如您所遇到的，对HTML响应不佳的设备。

我个人认为，我会尽量避免使用HTML来实现签名，因为这样做非常棘手。电子邮件从未被设计为能够显示HTML，但它可以轻松处理格式和图像。这导致我找到解决方案...

如果您要向收件人显示业务详细信息，为什么不能在Photoshop中设计出真正美观的图像并将其附加到每封电子邮件的底部？几乎所有公司都使用这种显示漂亮的电子邮件签名的方法，因为没有其他方法可以执行此操作。即使您确实想使其响应，也需要适应各种屏幕尺寸，显示HTML和CSS的能力以及不同的在线和桌面客户端。我认为您可能正在尝试实现一些棘手的事情。

电子邮件签名无法在手机上正常工作

1 个答案: