Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created November 8, 2011 11:05
Show Gist options
  • Star 81 You must be signed in to star a gist
  • Fork 14 You must be signed in to fork a gist
  • 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';
}
});
});
})();
@ghatem
Copy link

ghatem commented Sep 2, 2014

what do you mean stylefix???

@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