如何避免文本行重叠并让媒体查询在大屏设备生效？

问题根源 #

1. 文本行重叠：HTML中<p>标签的内联样式硬写了line-height:18px，固定像素值和<code>标签的字体大小（18px）不匹配，导致行间距过小引发重叠；同时媒体查询里的font简写会重置line-height为默认值，进一步加剧问题。
2. 媒体查询失效：所有媒体查询对<code>的样式设置完全一致，未做差异化响应式适配；且font复合属性简写会覆盖原有font-weight等样式，破坏基础样式设置。

解决方案 #

1. 修复文本行重叠 #

• 移除<p>标签内联样式中的line-height:18px，改用相对行高（如1.5或1.6），行间距会随字体大小自动适配，避免固定值导致的重叠。
• 将<code>标签的内联样式（如背景色）移到外部CSS统一管理，减少内联样式对外部样式的干扰。

2. 修复大屏媒体查询 #

• 精简冗余的媒体查询区间，根据屏幕尺寸设置差异化字体大小，实现真正的响应式适配。
• 避免使用font复合属性简写（会重置未指定的样式），单独设置font-size即可，保留原有font-family、font-weight、line-height等样式。
• 尽量减少!important的使用，仅在必须覆盖内联样式时采用。

修改后的代码 #

优化后的CSS #

/* 基础样式：统一控制code标签 */
code {
  font-family: "verdana";
  font-size: 18px;
  color: black;
  font-weight: bold;
  line-height: 1.6; /* 相对行高，适配不同字体大小 */
  background-color: cyan; /* 统一管理背景色 */
}

/* 小屏设备（手机） */
@media (max-width: 480px) {
  code {
    font-size: 16px; /* 小屏缩小字体提升可读性 */
  }
}

/* 平板设备 */
@media (min-width: 481px) and (max-width: 1024px) {
  code {
    font-size: 17px;
  }
}

/* 大屏设备（桌面） */
@media (min-width: 1025px) {
  code {
    font-size: 19px; /* 大屏放大字体适配显示空间 */
  }
}

优化后的HTML #

<p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; text-align: justify; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: transparent;">
  <span style="font-size: 13.5pt; font-family: &quot;Verdana&quot;,&quot;sans-serif&quot;;">
    <code><b>Diagnosis and Tests for Addison's disease:-</b></code>
  </span>
</p>
<p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; text-align: justify; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: transparent;">
  <span style="font-size: 13.5pt; font-family: &quot;Verdana&quot;,&quot;sans-serif&quot;;">
    <code><b>Please E-mail us for any questions with respect to the above.</b></code>
  </span>
</p>

额外建议 #

• 尽量移除所有内联样式，将样式全部迁移到外部CSS文件，便于统一维护和修改。
• 行高优先使用相对倍数而非固定像素值，适配不同字体大小和设备屏幕。
• 媒体查询区间可根据实际设计需求灵活调整，无需过度细分。

内容的提问来源于stack exchange，提问作者Zion ToDo