JSFiddle - React, Tailwind, and code Playground

by bfaria

HTML

<body>
  <h1>Example Text</h1>
  <div id="width">0</div>
</body>

CSS

h1 {
  font-size: 20px;
}

@media (min-width: 250px) {
  h1 {
    font-size: 40px;
  }
}

@media (min-width: 500px) {
  h1 {
    font-size: 80px;
  }
}

/** Working example **/
@media (min-width: 625px) {
  body {
    zoom: 1.25;
  }
}

/** Dynamic zoom test (not working) **/
@media (min-width: 625px) {
  body {
    zoom: calc(100% * calc(100vw / 625));
  }
}

JavaScript

var updateWidthValue = function(event) {
  document.getElementById('width').innerText = window.innerWidth + 'px';
};

window.onresize = updateWidthValue;

updateWidthValue();