如何让内联SVG随p.para的font-size实现无JS响应式适配

核心问题出在你用了rem单位——它是相对于根元素（<html>）的字体大小，而非你设置了font-size的<p class="para">。换成em单位就能让SVG尺寸跟着<p>的字体大小自动变化，因为em是相对于父元素的字体大小计算的。

修改后的CSS代码 #

p.para {
  text-align: justify!important;
  font-size: 0.5rem; /* 这里的rem控制基础文本大小，SVG会基于这个值缩放 */
}

p.para span {
  display: inline-block; 
  width: 1em; /* 改为em，相对于p.para的font-size */
  height: 1em;
}

p.para svg {
  height: 1em; /* 同样改为em */
  width: 100%; /* 让SVG占满span的宽度，确保比例正确 */
  display: inline-block;
  vertical-align: middle; /* 调整对齐，让SVG和文本居中对齐更自然 */
}

修改后的HTML代码 #

<p class="para">
  bla bla foo bar foobar bla bla
  <span>
    <svg viewBox="0 0 20 20">
      <rect width="20" height="20" rx="5" fill="blue" />
    </svg>
  </span>
  bla bla foo bar foobar bla bla.
  More text and even more text.
</p>

关键说明 #

• viewBox="0 0 20 20"必须保留，它定义了SVG的坐标系统，保证缩放时图形不失真。
• 给SVG加上width: 100%是为了让它自适应span的宽度，避免出现拉伸或留白问题。
• 如果不需要额外的span容器，直接给SVG设置width:1em; height:1em;也能实现同样效果，span只是辅助对齐用的。

测试的时候，你只需要修改p.para的font-size（比如改成1rem），就能看到SVG的尺寸跟着文本一起变大或缩小了，完全不需要JavaScript。

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