thaerlabs/v2p.html

## v2p.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="v2p.js"></script>
<style type="text/css" media="all">
body { margin: 0; }
div {
  background: #fa7098;
}
</style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div>hello</div>
  <script type="text/javascript" charset="utf-8">
  $('div').css({
    height: '50vh',
    width: '50vw',
    marginTop: '25vh',
    marginLeft: '25vw',
    fontSize: '10vw'
  });
  </script>
</body>
</html>

## v2p.js
/*
 * CSS viewport units with jQuery
 * http://www.w3.org/TR/css3-values/#viewport-relative-lengths
 */
/*
 * CSS viewport units with jQuery
 * http://www.w3.org/TR/css3-values/#viewport-relative-lengths
 */
;(function( $, window ){

  var $win = $(window)
    , _css = $.fn.css;

  function viewportToPixel( val ) {
    var percent = val.match(/[\d.]+/)[0] / 100,
        unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent +'px';
  }

  function parseProps( props ) {
    var p, prop;
    for ( p in props ) {
      prop = props[ p ];
      if ( /[vwh]$/.test( prop ) ) {
        props[ p ] = viewportToPixel( prop );
      }
    }
    return props;
  }

  $.fn.css = function( props ) {
    var self = this,
        update = function() {
          return _css.call( self, parseProps( $.extend( {}, props ) ) );
        };
    $win.resize( update ).resize();
    return update();
  };

}( jQuery, window ));
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="v2p.js"></script>
	<style type="text/css" media="all">
	body { margin: 0; }
	div {
	background: #fa7098;
	}
	</style>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div>hello</div>
	<script type="text/javascript" charset="utf-8">
	$('div').css({
	height: '50vh',
	width: '50vw',
	marginTop: '25vh',
	marginLeft: '25vw',
	fontSize: '10vw'
	});
	</script>
	</body>
	</html>
	/*
	* CSS viewport units with jQuery
	* http://www.w3.org/TR/css3-values/#viewport-relative-lengths
	*/
	/*
	* CSS viewport units with jQuery
	* http://www.w3.org/TR/css3-values/#viewport-relative-lengths
	*/
	;(function( $, window ){

	var $win = $(window)
	, _css = $.fn.css;

	function viewportToPixel( val ) {
	var percent = val.match(/[\d.]+/)[0] / 100,
	unit = val.match(/[vwh]+/)[0];
	return (unit == 'vh' ? $win.height() : $win.width()) * percent +'px';
	}

	function parseProps( props ) {
	var p, prop;
	for ( p in props ) {
	prop = props[ p ];
	if ( /[vwh]$/.test( prop ) ) {
	props[ p ] = viewportToPixel( prop );
	}
	}
	return props;
	}

	$.fn.css = function( props ) {
	var self = this,
	update = function() {
	return _css.call( self, parseProps( $.extend( {}, props ) ) );
	};
	$win.resize( update ).resize();
	return update();
	};

	}( jQuery, window ));