UI培訓(xùn)之移動端rem變革（一）

更新時(shí)間:2016年09月30日13時(shí)09分來源:傳智播客UI培訓(xùn)學(xué)院瀏覽次數(shù):

移動端rem變革

rem這是個(gè)低調(diào)的css單位，近一兩年開始嶄露頭角，行業(yè)內(nèi)對rem的評價(jià)不一，有的在嘗試使用，有的在使用過程中遇到坑就棄用了。那rem到底值不值得開發(fā)者使用呢？看完本文再做決定。

rem是什么？

rem是指相對于根元素的字體大小的單位，簡單的說它就是一個(gè)相對單位?？吹絩em大家一定會想起em單位，em是指相對于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過rem計(jì)算的規(guī)則是依賴根元素，而em是依賴父元素計(jì)算的。

舊的移動端布局方案：

將時(shí)間追溯到一兩年前，那時(shí)移動端布局方案的一種做法是以320寬度為標(biāo)準(zhǔn)去做適配，超過320大小的手持設(shè)備還是以320的規(guī)格去展示，稱之為固定布局。該布局方案存在一些弊端：例如在大屏幕手機(jī)下兩邊是留白的，還有一個(gè)就是大屏幕下看起來頁面會特別小。

另一種做法是，頁面布局使用百分比來定義寬度，但高度仍然使用px來固定住，稱之為流式布局。這種布局方案雖然可以讓各種屏幕都適配，但是顯示的效果極其的不好，因?yàn)橹挥袔讉€(gè)尺寸的手機(jī)能夠完美的顯示出設(shè)計(jì)師最想要的效果，但是目前行業(yè)里使用流式布局的還是十分多的，如：