如何响应地调整 html 文本元素的大小，但不相对于其他元素？答案

【问题标题】：How to size an html text element responsively but not relative to other elements?如何响应地调整 html 文本元素的大小，但不相对于其他元素？
【发布时间】：2022-01-26 02:15:11
【问题描述】：

我有一个在 Canva.com 中制作的设计，我正在尝试将其转换为 HTML、CSS 文档。在 Canva 中，文本有不同的大小，如 12、42 等（我不确定这些是否是像素）。我在这里尝试做的是使页面具有响应性（当屏幕较小时会调整文本大小）并调整与其他元素（可能是它们的父元素）无关的文本大小。

假设我有两个文本元素，我想相应地调整它们的大小：

Text A = 12 Canva 文字大小单位 Text B = 24 Canva 文本大小单位

我想相应地调整文本 B 的大小，使其看起来比文本 A 大两倍。

如果我对文本 A 使用 font-size: 1.2em，对文本 B 使用 font-size: 2.4em。它会让事情看起来像我预期的那样吗？那么，是 1.2em+1.2em = 2.4em？

【问题讨论】：

标签： html css responsive-design font-size

【解决方案1】：

那么，1.2em+1.2em = 2.4em？

不一定：em 是相对于当前标签/类/ID 定义的字体大小，所以在组合不同的标签时它不起作用（尤其是像 h1 - h6 这样的标题，还有 p、li 等。）。如果您需要像 1.2 + 1.2 = 2.4 这样的字体大小关系，最好使用 rem 作为字体大小单位。它总是与html 标记的已定义（或如果未定义：浏览器默认）字体大小有关。

【讨论】：

【解决方案2】：

在大多数文字处理或打印设计程序中，文本大小以pt 为单位。网站使用rem 来表示响应大小是很常见的。像 rem 这样的固定大小单位是相加的，其中 1rem 是 2rem 大小的一半。

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths

【讨论】：