rem 這個單位對於前端來說並不陌生了,在移動端適配方面,我們經常會用到它,通常我們會採用類似淘寶flexible.js 的方案, 寫px,然後通過外掛轉化成rem,然後得出一堆小數值的rem單位.淘寶這個方案已經用了很多年,相容性很好,然而現在已經2018年了,許多相容性問題現在不再那麼頭疼了,因此我們現在有了更好的適配方案.

在很早以前,vw 這個單位就已經被列入w3c規範了,如果基本都支援了,vw 表示螢幕的1%,可能有人會問到那跟百分比有什麼區別呢? 通常,很多情況確實可以被百分比替代,但是要知道百分比如果要子n代元素都生效,那得所有父級元素都得相對html,body 100%寬才能有作用,而vw則永遠相對 螢幕1%.說了vw的含義來說說怎麼結合rem適配吧.

這裡直接給出結果,只需一行程式碼即可

html{font-size:13.33333333vw}

然後我們即可根據設計稿(前提設計稿是750px的),這樣我們寫1rem即為設計稿上的100px

效果如上圖所示,注意:應設定meta為移動端

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

,是不感覺很詫異,寫的width:1rem,heigth:1rem的div 就是50px* 50px (iphone6為2倍屏,即對應750px設計稿上的100px*100px) 怎麼搞定的,1句程式碼就能實現,太神奇.不信可以看看上圖或者自己試一下.恩,就是這麼簡單,1句css程式碼就搞定,無需任何的js程式碼.

　　下面分析下原理吧, 上面我們說了vw表示1%的螢幕寬度,而我們的設計稿通常是750px的,螢幕一共是100vw,對應750px,那麼1px就是0.1333333vw, 為了方便計算,我們放大100倍,同時我們知道另一個單位rem,rem是相對html元素,為了方便計算,我們取html是100px,通過上面的計算結果1px是0.13333333vw,那麼100px就是13.333333vw了.這樣後面的用rem就很好計算了,這樣就得到13.3333333vw對應100px(750px的 設計稿),然後我們就可以很愉快的寫rem單位了, 由於倍率是100,我們也不需要啥計算外掛之類的了,除以100,直接小數點向左移動2位,1rem是100px,那麼10px就是0.1rem,1px就是0.01rem,小學生都會算了, 不需要用postcss-px-to-viewport這種工具轉成一堆小數位特長的rem單位了,而且這個很方便,直接寫rem,並不需要轉換,用了轉換工具 如果想寫px的地方還得設定白名單或者黑名單,這個就不存在這種問題了, 想用相對的就rem,想絕對的就直接寫px即可,並不需要其他的各種設定.是不是很簡單?
　　檢視原文