寫移動端自適應屏幕的方法

版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接和本聲明。
本文連接：https://blog.csdn.net/weixin_43606158/article/details/89300534javascript

前端移動端開發的時候確定是會面對不一樣型號的手機的頁面展現問題的，今天給你們推出另一種自適應不一樣移動端的方法，使用vw，vh單位。
vw和vh單位的大小是多少？
vw和vh是根據設備的寬度和高度來決定的，設備的寬就是100vw，設備的高就是100vh，
你設置的50vw就是至關於設備寬度的50%，你設置的100vh就是至關於設備高度的100%。
切記：不要把vw和vh弄混淆了，若是你給元素寬度設置100vh，那麼基本上(設備的寬小於高的狀況)就會超出你的屏幕X軸出現滾動條。若是你給元素高度設置100vw，那麼就知足不了你想要把這個元素鋪滿整個設備高度的願望了。
通常狀況下筆者寬度，和字體大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。html

試例以下：
在iPhone5/SE下的樣子：前端

在iPhone6/7/8plus下的效果：java

效果並不會由於設備變大或者變小而致使樣式變亂，因此極力推薦你們使用！npm

筆者這裏用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>&nbsp;&nbsp;&nbsp;vw
<br> 結果高度：<span class="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 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>

計算器的樣式筆者沒有去調，有樣式潔癖的朋友就只好本身改一改了，對不住了~
計算器樣式以下：url

使用方法：
1. 將設計圖放到PS裏面，查看整個圖片的寬度和高度，分別放在設計稿寬度和設計稿高度當中。（注意是px單位哦）
2. 而後量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當中。（注意仍是px單位哦）
3. 而後點擊換算按鈕，就能夠將換算出來的寬度和高度大小放置到你的代碼當中了哦。（注意是vw和vh單位哦）
注意：
若是你只是要寬度或者高度單位能夠不用管另一個哦，可是千萬別弄串了就行哦~spa

或者使用第二種方法：
到npmjs中下載px2rem到你的項目中然後進行使用.net

連接：https://www.npmjs.com/package/px2rem設計