<body>
  <div>
    <label>Mude aqui a fonte base do usuário</label>
    <input type=number value=16 />
  </div>  
  <p>Texto não acessível e não responsivo</p>
  <p>Texto acessível e não responsivo</p>
  <p>Texto não acessível e responsivo</p>
  <p>Texto acessível e responsivo</p>
  
</body>
*{
  margin: 0;
}

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 input,
label{
  font-size: 1rem
}

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

body p:nth-child(2){
  font-size: 24px
}

body p:nth-child(3){
  font-size: 1.5rem
}

body p:nth-child(4){
  font-size: 24px
}

body p:nth-child(5){
  font-size: 1.5rem
}

@media (max-width: 700px){
  body p:nth-child(4){
    font-size: 14px
  }
  
  body p:nth-child(5),
  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.