Skip to content

Instantly share code, notes, and snippets.

@hollychen503
Forked from LeaVerou/vunits.js
Created June 3, 2016 10:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hollychen503/b7371040834ed79e3af55b0cba0cb934 to your computer and use it in GitHub Desktop.
Save hollychen503/b7371040834ed79e3af55b0cba0cb934 to your computer and use it in GitHub Desktop.
Static polyfill for vw, vh, vm units
/**
* Polyfill for the vw, vh, vm units
* Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/
* @author Lea Verou
*/
(function() {
if(!window.StyleFix) {
return;
}
// Feature test
var dummy = document.createElement('_').style,
units = ['vw', 'vh', 'vm'].filter(function(unit) {
dummy.width = '';
dummy.width = '10' + unit;
return !dummy.width;
});
if(!units.length) {
return;
}
StyleFix.register(function(css) {
var w = innerWidth, h = innerHeight, m = Math.min(w,h);
return css.replace(RegExp('\\b(\\d+)(' + units.join('|') + ')\\b', 'gi'), function($0, num, unit) {
switch (unit) {
case 'vw':
return (num * w / 100) + 'px';
case 'vh':
return num * h / 100 + 'px';
case 'vm':
return num * m / 100 + 'px';
}
});
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment