如何按比例调整HTML元素（h1/h2/h3/p等）的字体大小？

要实现h1、h2、p等元素按比例调整字体大小，核心是让所有文本元素的字号基于根元素（html）用相对单位定义，你之前的代码失效，是因为浏览器默认的标题样式可能被覆盖成了固定值，或者你没给各元素设置相对比例。

具体实现步骤： #

1. 用rem单位定义各元素的字体比例
   rem是相对于根元素（html）的字号单位，只要给各元素设置基于rem的比例，调整根元素字号时所有元素都会按比例变化：

/* 根元素设置基准字号 */
html {
  font-size: 16px; /* 可根据需求修改，比如改成150%就是24px */
}

/* 按比例定义各元素字号 */
h1 {
  font-size: 2rem; /* 是根字号的2倍 */
}

h2 {
  font-size: 1.5rem; /* 根字号的1.5倍 */
}

h3 {
  font-size: 1.25rem; /* 根字号的1.25倍 */
}

p {
  font-size: 1rem; /* 和根字号一致 */
}

比如把html的font-size改成150%，h1会变成2*24px=48px，h2变成1.5*24px=36px，p变成24px，完全保持比例。

2. 响应式场景下的进阶用法
   如果想让字体随屏幕宽度自动按比例变化，可以用vw（视口宽度单位）作为根元素的基准：

html {
  font-size: 2vw; /* 基于视口宽度的2%，屏幕越宽字号越大 */
}

/* 各元素比例同上 */
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
p { font-size: 1rem; }

关键注意点： #

• 不要给文本元素设置固定的px字号，否则相对单位的比例调整会失效。
• 相比em（基于父元素字号），rem更稳定，不会因为嵌套层级导致字号意外变化。

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