版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/weixin_43606158/article/details/89300534
前端移動端開發的時候肯定是會面對不同型號的手機的頁面展示問題的，今天給大家推出另外一種自適應不同移動端的方法，使用vw，vh單位。
vw和vh單位的大小是多少？
vw和vh是根據設備的寬度和高度來決定的，設備的寬就是100vw，設備的高就是100vh，
你設置的50vw就是相當於設備寬度的50%，你設置的100vh就是相當於設備高度的100%。
切記：不要把vw和vh弄混淆了，如果你給元素寬度設置100vh，那么基本上(設備的寬小於高的情況)就會超出你的屏幕X軸出現滾動條。如果你給元素高度設置100vw，那么就滿足不了你想要把這個元素鋪滿整個設備高度的願望了。
一般情況下筆者寬度，和字體大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。
試例如下：
在iPhone5/SE下的樣子：
在iPhone6/7/8plus下的效果：
效果並不會因為設備變大或者變小而導致樣式變亂，所以極力推薦大家使用！
筆者這里用html做了一個簡單的vw，vh換算器，分享給大家。
代碼如下：
<!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 class="result-w"></span> vw <br> 結果高度：<span class="result-h"></span> vh </div> <script type="text/javascript"> let result1; let result2; let button1 = document.getElementById("button"); button1.onclick = function(){ let measureTheWidth = document.getElementById("width").value, measureTheHeight = document.getElementById("height").value, draftWidth = document.getElementById("gao-width").value, draftHeight = document.getElementById("gao-height").value; result1 = (100/Number(draftWidth)*Number(measureTheWidth)).toFixed(2); result2 = (100/Number(draftHeight)*Number(measureTheHeight)).toFixed(2); document.getElementsByClassName("result-w")[0].innerText=result1; document.getElementsByClassName("result-h")[0].innerText=result2; console.log(result1,result2) }; </script> </body> </html>
計算器的樣式筆者沒有去調，有樣式潔癖的朋友就只好自己改一改了，對不住了~
計算器樣式如下：
使用方法：
1. 將設計圖放到PS里面，查看整個圖片的寬度和高度，分別放在設計稿寬度和設計稿高度當中。（注意是px單位哦）
2. 然后量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當中。（注意還是px單位哦）
3. 然后點擊換算按鈕，就可以將換算出來的寬度和高度大小放置到你的代碼當中了哦。（注意是vw和vh單位哦）
注意：
如果你只是要寬度或者高度單位可以不用管另外一個哦，但是千萬別弄串了就行哦~
或者使用第二種方法：
到npmjs中下載px2rem到你的項目中而后進行使用