移動端vw適配方案
在移動端適配有很多種方案，有flex佈局，百分比佈局，響應式佈局，還有vw佈局，
下面講解以下vw佈局：
首先我們得明確vw是什麼？
vw viewpoint width，視窗寬度，1vw=視窗寬度的1%
vw是一種css單位。1vw相當於視窗寬度的1%,100vw相當於100%.
這種佈局和百分比佈局有點類似。
我們先來說下移動端網頁適配的難點在哪裡，
由於移動端設配畫素高，螢幕小，導致PC端網頁直接在移動端顯示效果很差，例：
移動端瀏覽器視窗大小預設為980css畫素，這是為了相容PC端的網頁，但是這種顯示效果並不好
所以我們在開發移動端網頁的時候往往根據最佳視口來設計，也就是根據每臺螢幕的大小解析度不同而設定不一樣的CSS畫素，以保證良好的使用者體驗
在頭部標籤加入下面這一句就可以讓不同裝置的瀏覽器的視口取最佳CSS畫素
<metaname="viewport"content="width=device-width,initial-scale=1.0">
但是，這又會產生新的問題，不同裝置的瀏覽器CSS畫素不一樣，如果按傳統的PC端網頁來開發，那麼就會有以下適配問題：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding:0; } .box1{ width: 187.5px; height: 100px; background-color: red; } </style> </head> <body> <div class="box1"> </div> </body> </html>
以上網頁在iphone6/7/8顯示效果：
在iPad上的顯示效果：
在iphone5/5s/se的顯示效果：
很明顯直接用單純的px為畫素是不適合的，這樣會給很多裝置帶來很差的使用者體驗
所以我們以下介紹用vw適配來解決，上面一開頭就說明了vw是什麼。
vw viewpoint width，視窗寬度，1vw=視窗寬度的1%
以上程式碼我們用vw來適配，看下效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding:0; } .box1{ width: 50vw; height: 100px; background-color: red; } </style> </head> <body> <div class="box1"> </div> </body> </html>
以上網頁在iphone6/7/8顯示效果：
在iPad上的顯示效果：
在iphone5/5s/se的顯示效果：
可以看出，在不同裝置都能佔據一半視口寬度的效果。
但是，設計圖精度到1px,這樣直接用vw就不太現實了
設計圖一般會給出畫素資料但是不會給出vw為單位的資料，所以我們得把px轉化為vw，
那麼我們可以利用rem,
上面設計圖的寬度是750px,那麼100/750vw就是1px了，
利用rem，也就是給html設定字型大小，但是很多瀏覽器並不支援1px的字型大小，所以我們可以設定成
100/750*40vw,也就是1rem等於40px,而且rem的單位也是vw，所以這就可以做到所有裝置了。
使用rem:
假設一個div在設計圖上的寬度為79px,那麼我們可以這樣設定
div{
79rem/40
}
當然，css是不支援直接加減乘除的，我們需要藉助less
https://www.cnblogs.com/webpon/p/13398884.html