How apply CSS font size "relative to what it would be originally"?-CodePudding

I know em is relative to parent, and also know rem is relative to the root.

Is there any CSS trick to apply a font size which is relative to what it would be originally? I mean magnify or shrink element font size relatively compared to what it would rendered originally?

CodePudding user response：

No - there's no unit for "relative to browser default" setting. Even if you use all: unset, there's no way to do it on one element. You will need a wrapping element to even get close:

<div style="font-size: 1rem">
  <span style="font-size: 120%">...</span>
</div>

You might be able to try to use the shadow dom (google how to do that). Inside there you have a fresh new scope where you can reset all the styles you want without affecting the outside world. I'll leave that to you to play around with that idea.

CodePudding user response：

Use font size in percentage like font-size: 120%;

body {
  font-size: 20px;
}
.big {
  font-size: 120%;
}
.small {
  font-size: 70%;
}

<p>Regular Text</p>
<p class="big">Bigger Text</p>
<p class="small">Smaller Text</p>