CalC
✨ Jabont
<html> <head> <title>Let's Start </title> <style> body{ --fontSize:5; background:#eee; margin:10px; font-family:sans-serif; font-size:calc(var(--fontSize) * 5px); } .box{ display:inline-block; height:100px; background:yellow; box-shadow:0px 0px 10px #0005 inset; width:100%; } .divide-3{ width:calc(100% / 3) } .divide-5{ width:calc(100% / 5) } .divide-7{ width:calc(100% / 7) } .box-wrap{ font-size:0; } </style> </head> <body> <input type="range" min="0" max="10" id="inputSize" oninput="changeSize()"> <h1> IT KMITL </h1> <div class="box-wrap"> <div class="box"> </div> <div class="box divide-3"> </div> <div class="box divide-3"> </div> <div class="box divide-3"> </div> <div class="box divide-5"> </div> <div class="box divide-5"> </div> <div class="box divide-5"> </div> <div class="box divide-5"> </div> <div class="box divide-5"> </div> <div class="box divide-7"> </div> <div class="box divide-7"> </div> <div class="box divide-7"> </div> <div class="box divide-7"> </div> <div class="box divide-7"> </div> <div class="box divide-7"> </div> <div class="box divide-7"> </div> </div> <script> function changeSize(){ let fontSize = parseInt(document.querySelector('#inputSize').value); document.body.style.setProperty('--fontSize',fontSize) } </script> </body> </html>