如何实现响应式邮件签名？移动端需将Logo置于姓名上方

针对你的需求，我们需要调整HTML和CSS，让签名在桌面端保持双列布局，移动端自动切换为Logo居顶的单列布局。以下是修改后的完整代码及关键说明：

修改后的CSS代码 #

table {
  font-family: helvetica;
  font-size: 11px;
  max-width: 600px; /* 桌面端固定最大宽度 */
  width: 100%; /* 移动端自适应屏幕宽度 */
  border-collapse: collapse; /* 消除表格边框间隙 */
}

hr {
  max-width: 600px;
  width: 100%;
  margin-left: 0px;
  border: 0.5px solid #081A45;
}

#name {
  color: #081A45;
  font-size: 24px;
}

#contact-start {
  padding-top: 10px;
}

#contact-end {
  padding-bottom: 10px;
}

.image {
  width: 100%;
  height: auto; /* 保持图片比例，避免拉伸变形 */
  max-width: 150px; /* 限制图片最大宽度 */
}

.image-container {
  width: 150px;
  padding: 10px;
  vertical-align: top; /* 桌面端Logo与姓名顶部对齐 */
}

/* 移动端响应式规则，屏幕宽度≤480px时生效 */
@media only screen and (max-width: 480px) {
  .image-container {
    width: 100%;
    display: block; /* 让Logo单元格独占一行 */
    text-align: center; /* Logo居中显示 */
    padding: 10px 0;
  }
  
  table tr {
    display: block; /* 表格行转为块级元素 */
  }
  
  table td {
    display: block; /* 表格单元格转为块级，占满整行宽度 */
    width: 100%;
    padding: 5px 0; /* 调整内边距优化移动端阅读体验 */
  }
  
  #name {
    font-size: 20px; /* 移动端缩小姓名字体，适配小屏幕 */
  }
}

修改后的HTML代码 #

<table>
  <tr>
    <td rowspan="6" class="image-container"><img class="image" src="你的Logo地址.png" alt="个人Logo"></td>
    <td id="name">Name Surname</td>
  </tr>
  <tr>
    <td>nr. licencji xxx </td>
  </tr>
  <tr>
    <td id="contact-start"><a href="tel:123123123">123123123</a></td>
  </tr>
  <tr>
    <td><a href="mailto:monikazurek@warso.eu">monikazurek@warso.eu</a></td>
  </tr>
  <tr>
    <td id="contact-end"><a href="https://www.warso.eu" target="_blank">www.warso.eu</a></td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at facilisis nibh. Mauris tempor nibh purus. Phasellus congue ullamcorper risus at tempus.</td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <td> Our Partners:</td>
  </tr>
  <tr>
    <td> Logo1 Logo2 Logo3</td>
  </tr>
</table>

关键改动说明 #

1. 基础布局适配：将表格和水平线的固定宽度改为max-width + width:100%，既保证桌面端有固定宽度，又让移动端自动适配屏幕。
2. 图片优化：设置height:auto保持图片比例，避免拉伸；max-width限制图片最大尺寸，防止在小屏幕上过大。
3. 移动端布局切换：通过媒体查询，将Logo单元格转为块级元素独占一行，同时把所有表格单元格改为块级，强制单列布局。
4. 细节优化：将电话链接改为tel:协议提升可用性，补全网址的https前缀，调整移动端字体大小和内边距优化阅读体验。

注：部分旧版桌面邮件客户端（如Outlook 2016及更早版本）不支持媒体查询，但这类客户端主要在桌面端使用，不会影响移动端的布局效果。

内容的提问来源于stack exchange，提问作者2pacan