移动端自适应屏幕的方法,使用vh和vw

深碍√TFBOYSˉ_ 2023-02-11 08:52 6阅读 0赞

## **vh是相对设备的高度  1vh=视窗高度1%；** ##

如果视窗高度是520px.你的2vh就是520px\*2%=10.4px;实际上他的高度是10.4px。

如果知道设计图的px尺寸和视窗px尺寸，如何求他的vh高度呢？

**vh=100\*设计图的px尺寸/视窗px尺寸**

## **vw相对于设备的宽度  1vw=视窗宽度的1%** ##

因此我们可以写个编辑器来计算你想要换算的vh和vw吧标识的

> <!DOCTYPE html>  
> <html>  
> <head>  
>     <meta charset="utf-8">  
>     <title>换算器</title>  
> </head>  
> <body>  
>     <div>  
>         可视区宽度：<input type="text" id="gao-width" value="1920">px<br>  
>         可视区高度：<input type="text" id="gao-height" value="1080">px<br>  
>         <hr>  
>         <hr>  
>         量出的宽度：<input type="text" id="width" value="1">px<br>  
>         量出的高度：<input type="text" id="height" value="1">px<br>  
>         <button id="button">换算</button><br>  
>         结果宽度：<span id="result-w"></span>&nbsp;&nbsp;&nbsp;vw  
>         <br>  
>         结果高度：<span id="result-h"></span>&nbsp;&nbsp;&nbsp;vh  
>     </div>  
>     <script type="text/javascript">  
>         let result1;  
>         let result2;  
>         let button1 = document.getElementById("button");  
>         button1.onclick = function()\{  
>             let designWidth = document.getElementById("width").value,  
>                 designHeight = document.getElementById("height").value,  
>                 deviceWidth = document.getElementById("gao-width").value,  
>                  deviceHeight = document.getElementById("gao-height").value;  
>             result1 = (100\*Number(designWidth)/Number(deviceWidth)).toFixed(2);  
>             result2 = (100\*Number(designHeight)/Number(deviceHeight)).toFixed(2);  
>             document.getElementById("result-w").innerText=result1;  
>             document.getElementById("result-h").innerText=result2;  
>             console.log(result1,result2)  
>         \};  
>     </script>  
> </body>  
> </html>