移動(dòng)端rem變革
rem這是個(gè)低調(diào)的css單位,近一兩年開始嶄露頭角,行業(yè)內(nèi)對(duì)rem的評(píng)價(jià)不一,有的在嘗試使用,有的在使用過程中遇到坑就棄用了。那rem到底值不值得開發(fā)者使用呢?看完本文再做決定。
rem是什么?
rem是指相對(duì)于根元素的字體大小的單位,簡(jiǎn)單的說它就是一個(gè)相對(duì)單位??吹絩em大家一定會(huì)想起em單位,em是指相對(duì)于父元素的字體大小的單位。它們之間其實(shí)很相似,只不過rem計(jì)算的規(guī)則是依賴根元素,而em是依賴父元素計(jì)算的。
舊的移動(dòng)端布局方案:
將時(shí)間追溯到一兩年前,那時(shí)移動(dòng)端布局方案的一種做法是以320寬度為標(biāo)準(zhǔn)去做適配,超過320大小的手持設(shè)備還是以320的規(guī)格去展示,稱之為固定布局。該布局方案存在一些弊端:例如在大屏幕手機(jī)下兩邊是留白的,還有一個(gè)就是大屏幕下看起來頁面會(huì)特別小。
另一種做法是,頁面布局使用百分比來定義寬度,但高度仍然使用px來固定住,稱之為流式布局。這種布局方案雖然可以讓各種屏幕都適配,但是顯示的效果極其的不好,因?yàn)橹挥袔讉€(gè)尺寸的手機(jī)能夠完美的顯示出設(shè)計(jì)師最想要的效果,但是目前行業(yè)里使用流式布局的還是十分多的,如:
- 亞馬遜
- 攜程:
本文版權(quán)歸黑馬程序員UI培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!作者:黑馬程序員UI培訓(xùn)學(xué)院首發(fā):http://3rdspacecomics.com/news/ui.html