前端移動端開發的時候肯定是會面對不同型號的手機的頁面展示問題的，今天給大家推出另外一種自適應不同移動端的方法，使用vw，vh單位。
vw和vh單位的大小是多少？
vw和vh是根據裝置的寬度和高度來決定的，裝置的寬就是100vw，裝置的高就是100vh，
你設定的50vw就是相當於裝置寬度的50%，你設定的100vh就是相當於裝置高度的100%。
切記：不要把vw和vh弄混淆了，如果你給元素寬度設定100vh，那麼基本上(裝置的寬小於高的情況)就會超出你的螢幕x軸出現滾動條。如果你給元素高度設定100vw，那麼就滿足不了你想要把這個元素鋪滿整個裝置高度的願望了。
一般情況下筆者寬度，和字型大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。
試例如下：
在iphone5/se下的樣子：
在iphone6/7/8plus下的效果：
效果並不會因為裝置變大或者變小而導致樣式變亂，所以極力推薦大家使用！
設計稿寬度：計算器的樣式筆者沒有去調，有樣式潔癖的朋友就只好自己改一改了，對不住了~px設計稿高度：
px量出的寬度：
px量出的高度：
px換算
結果寬度： vw
結果高度：
vh
計算器樣式如下：
使用方法：
1. 將設計圖放到ps裡面，檢視整個的寬度和高度，分別放在設計稿寬度和設計稿高度當中。（注意是px單位哦）
2. 然後量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當中。（注意還是px單位哦）
3. 然後點選換算按鈕，就可以將換算出來的寬度和高度大小放置到你的**當中了哦。（注意是vw和vh單位哦）
注意：如果你只是要寬度或者高度單位可以不用管另外乙個哦，但是千萬別弄串了就行哦~
移動端螢幕自適應（筆記）
首先單位自適應，使用rem做單位，rem根據根標籤來決定，若html的font size為50px 那麼1rem就是50px 然後我們在根據螢幕大小來給html定義font size 把以下 寫到index.html中 fnresize window.onresize function functi...
移動端自適應所有螢幕的動態方法
原文 js動態計算rem 此 適配所有手機端 1.750的設計稿 function rem a 7.5 r.style.fontsize rem px var t w window.addelementlistener resize function false 2.任意尺寸的設計稿 自適應 假設設...
移動端自適應不同大小的螢幕
utf 8 format detection content telephone no content no viewport content user scalable no,initial scale 1,maximum scale 1,minimum scale 1,width device ...