移動端適配---響應式佈局---rem佈局---vw佈局--網易適配

rem和vw佈局主要都是爲了更好地適配移動端，畢竟手機的型號太多了。

在進行移動端設計的時候，首先要引入一個meta標籤。（禁止用戶縮放）

1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 

 咱們在剛開始接觸移動端的時候，可能都會遇到這種狀況：

PS中量取像素和web中手機預覽的大小不太同樣，彷佛感受web預覽效果上要比UI設計圖上的尺寸大。

這是由於手機顯示像素與咱們用ps量取的像素有必定的比例！

在2010年，iPhone4發佈會中，蘋果推出了「Retina」高清視網膜顯示屏。用易懂的白話來講就是能在1個像素單位裏面顯示4個像素，也就是說若是你在ps中量取了一個1px寬，1px高的盒子，那麼它在手機上就會顯示出看起來像2px寬，2px高盒子的樣子。若是想和設計圖相吻合，那就必須在量取的基礎上除以2。

 市場上手機型號太多，屏幕大小也各自不一樣，因此要經過便於維護並且實際適用的方式來開發頁面。

1. 響應式佈局 and 媒體查詢  

響應式佈局：根據當前不一樣設備，響應不一樣代碼。

媒體查詢：對設備提出詢問開始，如表達式結果爲真，媒體查詢中的css被應用，如爲假，則忽略。

1 @media all and (max-width:1040px) and (min-width:768px){
2             div{width:31%;}
3         }
4 @media all and (max-width:767px) and (min-width:450px){
5             div{width:45%;}
6         }
7 @media all and (max-width:449px){
8             div{width:90%;}
9         }

其中，all表明全部設備。若是and後括號裏爲orientation:portrait，表明豎屏；爲orientation:landscape，表明橫屏。

2. rem佈局  

 所謂rem佈局，就是結合媒體查詢，隨着設備的改變動改html的font-size值。

 設備像素比（DPR）= 物理像素（PS中量取的） /  邏輯像素（手機所顯示的）

設備型號	設計圖尺寸	DPR
iPhone4/4s	640px	2
iPhone6/7/8	750px	2
iPhone6/7/8P	1080px	3

 

 

 

 

 

window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。

以iphone4爲例，設計圖爲640px，那麼咱們就應將手機寬度設置爲640/2 = 320px。若是一個div量取的寬度爲10px，那麼相應的在手機中的css寬度就應該設置爲10 / 2 = 5px。

若是，html的font-size值爲16px，那麼 1rem = 16px；

3. vw佈局  

vw 當前設備屏幕寬度1/100響應式的值。

vh 當前設備屏幕高度1/100響應式的值。

vmin  vw和vh中較小的

vmax   vw和vh中較大的

100vw = 視口width的100%;   100vh = 視口height的100%。

注意：當出現垂直滾動條時，100vw≠width:100%; 100vw包含滾動條，width:100%不包含。

vw和rem相結合

爲了方便計算，能夠將html的font-size值設置爲100px，可是100px是一個固定值，沒有辦法隨着設備的改變而改變。下面用vw來解決html的font-size問題。

第一種狀況：

UI設計圖爲750px =>  dpr爲2  =>  適配核心設備375px  =>  100vw = 375px  =>  1vw =  3.75px  =>  100px = 26.67vw 。

因此=>  html{font-size:26.67vw};

若是量取一個盒子寬度爲100px。那麼css中就應該設置爲0.5rem (100px / 2 = 50px，50px / 100 = 0.5rem)。.

第二種狀況：

UI設計圖爲640px =>  dpr爲2  =>  適配核心設備320px  =>  100vw = 320px  =>  1vw =  3.20px  =>  100px = 31.25vw 。

因此=>  html{font-size:31.25vw};

若是量取一個盒子寬度爲100px。那麼css中就應該設置爲0.5rem (100px / 2 = 50px，50px / 100 = 0.5rem)。

第...種狀況：依次類推......

4. 網易適配  

因爲存在一種比例關係=>設計稿寬度  ： 設備寬度  =  設計稿中元素寬度   ： 設備中元素的寬度

得出  設備中元素寬度  = 設計稿中元素寬度 * 設備寬度  /  設計稿寬度

因爲1rem = 根元素html 的font-size值。爲了方便計算，給「公式中」設計稿元素寬度固定爲100。那麼每次量取元素時除以100，添加rem單位，即爲設備中元素像素值。

設計稿寬度爲750px，設備寬度爲375，一div寬度爲36px。

1.html的font-size設置爲  100 * 設備寬度(375)  /  設計稿寬度(750)

2.設備div寬度  =   設計稿中div寬度(36) * 設備寬度(375)  /  設計稿寬度(750)

3.因爲單位爲rem，因此量取時除以100，添加rem單位。width:0.36rem

(36/100)rem   =   (36/100)  *  ((100 * 375) / 750)   =  36  *  375  /  750   =  18px

轉換爲vw方法  =>

1 font-size: calc(100vw/7.5);
2 font-size: -webkit-calc(100vw/7.5);