<body>
  <div class="center">
    <label>Simulate user's different default font size</label>
    <input type=number value=16 />
  </div>
  <div class="rectangle">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a mauris mi. Donec ultricies ligula vitae magna mollis, a varius libero placerat. Phasellus pretium et lacus quis imperdiet. Phasellus dignissim eu nisi a cursus. Proin tristique ac leo sit amet aliquam. Vestibulum varius vestibulum enim eget facilisis. Mauris nec tellus ac augue porta imperdiet iaculis eget risus. Etiam vitae mollis odio, et mattis ligula. Maecenas tellus tortor, laoreet in arcu non, fermentum tristique dolor. In hac habitasse platea dictumst. Ut ipsum turpis, dignissim id pellentesque et, consectetur a odio. Nam porttitor malesuada urna, vitae aliquet nisi fermentum vitae. Vivamus dignissim condimentum augue quis lobortis. Integer dapibus orci sed libero efficitur tempor.</p>
  </div>
</body>
*{
  margin: 0;
  box-sizing: border-box
}

html{
  font-size: 16px;
}

body{
  background-color: hsl(30, 50%, 50%)
}

body > *{
  margin-bottom: 7vh;
  border: 1px solid black;
}

body > div{
  background-color: hsl(30, 70%, 30%);
  padding-block: 3vh
}

body > div.rectangle p{
  padding-inline: 1em;
  
  font-size: 1rem;
  line-height: 20px;
}

.center{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

body > div input,
label{
  font-size: 1rem
}

body > div input{
  width: 4.5em;
  padding-left: 1em
}

@media (max-width: 700px){
  label{
    font-size: .75rem
  }
}
const html = document.querySelector("html");
const input = document.querySelector("input");

input.addEventListener("change", (e) => {
    const tamanho = e.target.value;
    html.style.setProperty("font-size", `${tamanho}px`);
    
  
  }
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.