Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created November 8, 2011 11:05
Show Gist options
  • Save LeaVerou/1347501 to your computer and use it in GitHub Desktop.
Save LeaVerou/1347501 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';
}
});
});
})();
@mort3za
Copy link

mort3za commented Dec 8, 2015

Is there any standalone one?

@shmdhussain
Copy link

Only Integer values are covered not float values like 3.25vw

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment