Can I change the "root" value for rem sizes?

[jPaulB]

Hi Everybody,

I'm trying to make a CSS file to govern a series of PopUp display boxes.

To do this, I have many CSS statements such as:

.form-container h1 {
    font-family: Cabin SemiBold, sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    color: #000000;
}

I need to better manipulate the "rem" results.

How can I change the "root" value of REM? I understand the value to be 16px
but depending upon which PopUp I want to employ, I may want the "root" value to be
12px (75%) rather than 16px.
Can I change that value whenever I want?

 

[BigDady]

Yes, you can. Use font-size on the main element:

html {
  font-size: 62.5%;
}

This sets the value of rem to 10px and you can estimate sizes a lot easier. 1.2 rem is 12px, 1.4 is 14px.
Does this help?

 

[jPaulB]

Thank you, BigDaddy.
I thought it was going to be much more complicated than this.

Thanks again.
Paul

 

[VBService]

I'm totally agree with @BigDady and his example, but you can operate with percentages values too

[ on-line ]

<div class="grid">

  <div style="font-size: 200%">Lorem</div>
  <div class="px"></div><div class="percent"></div>

  <div style="font-size: 150%">Lorem</div>
  <div class="px"></div><div class="percent"></div>

  <div style="font-size: 125%">Lorem</div>
  <div class="px"></div><div class="percent"></div>

  <div style="font-size: 100%">Lorem</div>
  <div class="px"></div><div class="percent"></div>

  <div style="font-size: 75%">Lorem</div>
  <div class="px"></div><div class="percent"></div>

  <div style="font-size: 50%">Lorem</div>
  <div class="px"></div><div class="percent"></div>

  <div style="font-size: 25%">Lorem</div>
  <div class="px"></div><div class="percent"></div>

</div>

<style>
  html {
    font-size: 16px;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr .5fr .5fr;
    grid-template-rows: auto;
    width: 18rem;
    border: 1px solid hsl(0 0% 0% / .2);
  }
  .grid div {
    padding: .25rem;
    border: 1px solid hsl(0 0% 0% / .2);
  }
  .grid .px, .percent {
    display: grid;
    place-items: center;
    font: 500 .9rem/1 system-ui, monospace;
  }
  .grid div[style*="100%"],
  .grid div[style*="100%"] + div,
  .grid div[style*="100%"] + div + div {
    background-color: hsl(0 0% 0% / .2);
  }
</style>

<script>
  const divs = document.querySelectorAll('.grid div');
  for (const div of divs) {
    if (div.matches('.px'))
      div.textContent = getComputedStyle(div.previousElementSibling).fontSize;
    if (div.matches('.percent'))
      div.textContent = div.previousElementSibling.previousElementSibling.style.fontSize;
  }
</script>