HTML :
<div>
Convertir des <b>vw</b> en <b>px</b> : <br>
<input type="number" onchange="vwTOpx(this.value);">
<span>Result = <span id="result_vw_px"></span></span>
</div>
<div>
Convertir des <b>vh</b> en <b>px</b> : <br>
<input type="number" onchange="vhTOpx(this.value);">
<span>Result = <span id="result_vh_px"></span></span>
</div>
<div>
Convertir des <b>px</b> en <b>vw</b> : <br>
<input type="number" onchange="pxTOvw(this.value);">
<span>Result = <span id="result_px_vw"></span></span>
</div>
<div>
Convertir des <b>px</b> en <b>vh</b> : <br>
<input type="number" onchange="pxTOvh(this.value);">
<span>Result = <span id="result_px_vh"></span></span>
</div>
CSS :
/* STYLE FACULTATIF */
div {
background:#C4C4C4;
margin:auto;
text-align:center;
margin-bottom:20px;
padding:15px;
width:200px;
font-family:sans-serif;
}
b {color:red;}
JavaScript :
function vwTOpx(value) {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var result = (x*value)/100;
document.getElementById("result_vw_px").innerHTML = result; // prikaz rezultatov (neobvezno)
return result;
}
function vhTOpx(value) {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var result = (y*value)/100;
document.getElementById("result_vh_px").innerHTML = result; // prikaz rezultatov (neobvezno)
return result;
}
function pxTOvw(value) {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var result = (100*value)/x;
document.getElementById("result_px_vw").innerHTML = result; // prikaz rezultatov (neobvezno)
return result;
}
function pxTOvh(value) {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var result = (100*value)/y;
document.getElementById("result_px_vh").innerHTML = result; // prikaz rezultatov (neobvezno)
return result;
}