How to convert px to vh and vw in Javascript?

Asked

Viewed 1,028 times

4

I want to convert px to vh and vw in Javascript, how can I do this?

example 23px = response vh or vw

javascript jquery css3

1 answer

4


It’s just a matter of percentage:

var convertPx2 = {
  vh: function(px){
    px = parseFloat(px);
    var wh = $(window).height(); // captura a altura da viewport

    // faz a relação de  porcentagem dos pixels informados
    // com a altura da viewport
    return (px*100)/wh;
  },
  vw: function(px){
    px = parseFloat(px);
    var ww = $(window).width();  // captura a largura da viewport

    // faz a relação de  porcentagem dos pixels informados
    // com a largura da viewport
    return (px*100)/ww; 
  }
}


var convertPx2 = {
	vh: function(px){
  	px = parseFloat(px);
  	var wh = $(window).height();
    
    return (px*100)/wh;
  },
	vw: function(px){
  	px = parseFloat(px);
  	var ww = $(window).width();
    
    return (px*100)/ww;
  }
}

console.log('400px em vw: ', convertPx2.vw(400));
console.log('400px em vh: ', convertPx2.vh(400));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Browser other questions tagged javascript jquery css3

You are not signed in. Login or sign up in order to post.