可以将 CSS 字体大小设置为使用样式属性定义的类的相对百分比吗？答案

【问题标题】：Possible to set CSS font-size as a relative % of what the class is defined with using style property?可以将 CSS 字体大小设置为使用样式属性定义的类的相对百分比吗？
【发布时间】：2017-04-17 01:02:32
【问题描述】：

我有一个 div class="myBox" 和 "myTitle"

.myBox 的 CSS：

{
font-size:14px
}

.myTitle 的 CSS：

{
font-size:18px
}

现在在某些情况下，我希望它们都按百分比放大或缩小。因此，我设置了一个 style="font-size:150%"，然后将其添加到我的 HTML

这成功地覆盖了 CSS 类并将 150% 的字体大小应用于类。

问题

.myBox 和 .myTitle 现在都一样大，它们不会保持字体大小的相对差异。似乎 150% 与页面的全局字体大小有关，所以当我告诉它转到 150% 时，它们是相同的。

我所希望的是：

.myBox would be 150% * 14px = 21px
.myTitle would be 150% * 18px = 27px

有没有一种方法可以仅使用 CSS 和 style 属性将字体大小设置为按百分比放大？

【问题讨论】：

看看emw3schools.com/cssref/css_units.asp

标签： html css fonts

【解决方案1】：

这是em 的工作。 em 是基于父级字体大小的相对单位。搜索它，你会发现很多资源，包括它的犯罪伙伴，rem 单位 (:root em) https://www.w3.org/WAI/GL/css2em.htm

body {
  line-height: 1;
}

.box {
  font-size: 14px
}

.title {
  font-size: 18px
}

.bigger {
  font-size: 1.5em;
}

<div class="box">box (14px)
  <div class="myBox bigger">mybox (21px)</div>
</div>

<div class="title">box (18px)
  <div class="myTitle bigger">mybox (27px)</div>
</div>

【讨论】：