Using vmin and vmax in ie

Javascript - September 9, 2015

As you probably know if you like using CSS viewport units, the support for them isn’t fantastic.

  • vmax Isn’t supported in any version of ie or edge.
  • vmin Isn’t supported in ie9

The CSS Viewport Units

  • vw: 1/100th viewport width
  • vh: 1/100th viewport height
  • vmin: 1/100th of the smallest side
  • vmax: 1/100th of the largest side

Note: IE9 uses vm instead of vmin. It does not support vmax.


The CSS Viewport Units in Javascript

  • var vw = window.innerWidth / 100
  • var vh = window.innerHeight / 100
  • var vmin = Math.min(vw, vh)
  • var vmax = Math.max(vw, vh)

Setting your html font-size to a viewport unit and using em values everywhere, results in ridiculously responsive web pages


in *CSS:*
/* Can't set the rem value to a viewpoint unit */

.mySelector { 
  font-size: calc( 2vmin + 1.4vmax + 2vh ); 
}

The same thing in javascript.

// but with javascript you can!

function setSize() {
  var vw   = window.innerWidth / 100
  var vh   = window.innerHeight / 100
  var vmin = Math.min(vw, vh)
  var vmax = Math.max(vw, vh)
  document.documentElement.style.fontSize =  (( vmin * 2 ) + ( vmax * 1.4 ) + ( vh * 2 ))  + "px";
}

window.addEventListener("resize", setSize);
document.addEventListener("DOMContentLoaded", setSize);