Skip to content

Instantly share code, notes, and snippets.

@johnpmorris
Last active October 13, 2015 01:43
Show Gist options
  • Select an option

  • Save johnpmorris/a08f2f8fa3f5dfd5c2cc to your computer and use it in GitHub Desktop.

Select an option

Save johnpmorris/a08f2f8fa3f5dfd5c2cc to your computer and use it in GitHub Desktop.
some javascript to replicate this css and keep ie compatibility http://codepen.io/Johnm__/pen/bVdNWj
// setting the size of the units used in the calc function from the example pen.
var vminsize = 2
var vmaxsize = 1.4
var vhsize = 2
function setSize() {
var vw = window.innerWidth / 100 // vw = 1/100th viewport width
var vh = window.innerHeight / 100 // vh = 1/100th viewport height
var vmin = Math.min(vw, vh) // vmin = 1/100th of the smallest side
var vmax = Math.max(vw, vh) // vmax = 1/100th of the largest side
// set whatever dom element you want to the result of the viewport units.
document.documentElement.style.fontSize = (( vmin * vminsize ) + ( vmax * vmaxsize ) + ( vh * vhsize )) + "px";
}
// apply viewport size when the viewport changes
window.addEventListener("resize", setSize);
document.addEventListener("DOMContentLoaded", setSize);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment