移動(dòng)端rem變革

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

rem是什么？

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

舊的移動(dòng)端布局方案：

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

 

 
 

1. 亞馬遜

 
 
 
 
 
 
 
 
 

2. 攜程：

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