移動端rem變革

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

rem是什么？

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

舊的移動端布局方案：

將時間追溯到一兩年前，那時移動端布局方案的一種做法是以320寬度為標(biāo)準(zhǔn)去做適配，超過320大小的手持設(shè)備還是以320的規(guī)格去展示，稱之為固定布局。該布局方案存在一些弊端：例如在大屏幕手機下兩邊是留白的，還有一個就是大屏幕下看起來頁面會特別小。
 
另一種做法是，頁面布局使用百分比來定義寬度，但高度仍然使用px來固定住，稱之為流式布局。這種布局方案雖然可以讓各種屏幕都適配，但是顯示的效果極其的不好，因為只有幾個尺寸的手機能夠完美的顯示出設(shè)計師最想要的效果，但是目前行業(yè)里使用流式布局的還是十分多的，如：
 

 

 
 

1. 亞馬遜

 
 
 
 
 
 
 
 
 

2. 攜程：

本文版權(quán)歸黑馬程序員UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：黑馬程序員UI培訓(xùn)學(xué)院
首發(fā)：http://m.3rdspacecomics.com/news/ui.html