Vue acessibilty font-size

Use relative units to management font-size

by WILLIAM CORREA

HTML

<div id="app">
  <input type="number" v-model="percent">
  <div>
    text
    <div>
      text
    </div>
    <div>
      <p>
        paragraph
      </p>
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: 'Helvetica', sans-serif;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

html {
  font-size: 100%;
}

div,
input {
  font-size: 1rem;
}

div>p {
  font-size: 1.5rem;
}

Vue

new Vue({
  el: "#app",
  data: {
    percent: 100
  },
  watch: {
  	percent (percent) {
    	document.documentElement.style.fontSize = `${percent}%`
    }
  }
})