如何利用vw+rem進行移動端佈局

前言

由於在公司，只有一個前端，在作移動端佈局的時候。利用px進行佈局,發現，須要進行各類手機的適配。 因此在開發第二版的時候，想着引用lib-flexible庫(即手淘的方案),詢問了上一家公司的同事，會有一些字體和一些詭異的問題。 在無心中，忽然一個網友跟我說，他有一個很好用的適配方案。利用vw+rem。聽着他分析了一把，感受還不錯，因此大膽嘗試了一把

根據CSS3規範,視口單位主要包括如下4個:

• vw : 1vw 等於視口寬度的1%
• vh : 1vh 等於視口高度的1%
• vmin : 選取 vw 和 vh 中最小的那個
• vmax : 選取 vw 和 vh 中最大的那個

用視口單位度量，視口寬度爲100vw，高度爲100vh（左側爲豎屏狀況，右側爲橫屏狀況）

例如，在桌面端瀏覽器視口尺寸爲650px，那麼 1vw = 650 * 1% = 6.5px（這是理論推算的出，若是瀏覽器不支持0.5px，那麼實際渲染結果多是7px）。

兼容性

利用適口單位適配頁面

對於移動端開發來講，最爲重要的一點是如何適配頁面，實現多終端的兼容，不一樣的適配方式各有千秋，也各有缺點。

就主流的響應式佈局、彈性佈局來講，經過Media Queries 實現的佈局須要配置多個響應斷點，並且帶來的體驗也對用戶十分的不友好:佈局在響應斷點範圍內的分辨率維持不表，而在響應斷點切換的瞬間，佈局帶來斷層式的切換變換，如同卡帶的唱機般"咔咔咔"地一又一下。

而經過採用rem單位的動態計算的彈性佈局,則是須要在頭部內嵌一段腳原本進行監聽分辨率的變化來動態改變根元素字體大小，使得CSS於JS耦合了在一塊兒。

有沒有辦法可以解決這樣的問題呢？

答案是確定,經過利用適口單位實現適配的頁面,是既能解決響應式斷層問題，又能解決腳本依賴的問題的。

用法以iPhone6爲基準(750)

第一步通常來講，我都會對移動端進行meta標籤設置

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">
複製代碼

由於iPhone6以及大多數的dpr爲2,爲了第二步的方便進行換算

第二步設置body、html的font-size

html {
    font-size: 13.3333333333333vw // 設計圖100px，瀏覽器根據縮放爲 50px
}
複製代碼

13.3333333333333vw怎麼來?

100 / 750 = 0.133333333333333vw

咱們把這個適口當作100px,而後除於750換算得出 1px = 0.133333333333333vw

那麼整個適口等於 0.133333333333333 * 100 = 13.3333333333333vw = 100px

最終於得出 100px = 1rem (設計圖100px，瀏覽器根據縮放爲 50px)

經過這樣子換算咱們利用vw把rem轉換成了根據設計以100px爲基準

tip: (設計圖100px，瀏覽器根據縮放爲 50px)

那麼在項目上就很好地能夠進行使用了

div {

     // width: 設計圖100px，實際瀏覽器根據縮放爲 50px; 
     width: 1rem; 
}

span {
    height: .12rem
}

複製代碼

已經用上該方案並上線的項目

該項目是本人開發的，技術略渣，多多包涵