前言

因為在公司，只有一個前端，在做移動端布局的時候。利用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 }

13.3333333333333vw怎么來?

100 / 750 = 0.133333333333333vw 我們把這個適口當做100px,然后除于750換算得出 1px = 0.133333333333333vw 那么整個適口等于 0.133333333333333 * 100 = 13.3333333333333vw = 100px

最終于得出 100px = 1rem

通過這樣子換算我們利用vw把rem轉換成了以100px為基準

那么在項目上就很好地可以進行使用了

div {// width: 100px;width: 1rem; }span {// height: 12pxheight: .12rem }



原文發布時間為：2018年06月20日
原文作者：聰明的竹子愛學習
本文來源：掘金? ? ?如需轉載請聯系原作者

總結

以上是生活随笔為你收集整理的如何利用vw+rem进行移动端布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。