首頁技術(shù)文章正文

UI培訓(xùn)之移動(dòng)端rem變革(二)

更新時(shí)間:2017-04-14 來源:黑馬程序員UI培訓(xùn)學(xué)院 瀏覽量:

流式布局的弊端:

在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁面元素寬度被拉的很長,但是高度還是和原來一樣,實(shí)際顯示非常的不協(xié)調(diào),這就是流式布局的最致命的缺點(diǎn),往往只有幾個(gè)尺寸的手機(jī)下看到的效果是令人滿意的,其實(shí)很多視覺設(shè)計(jì)師應(yīng)該無法接受這種效果,因?yàn)樗麄兊脑O(shè)計(jì)圖在大屏幕手機(jī)下看到的效果相當(dāng)于是被橫向拉長來一樣。

rem能等比例適配所有屏幕

rem是通過根元素進(jìn)行適配的,網(wǎng)頁中的根元素指的是html我們通過設(shè)置html的字體大小就可以控制rem的大小。舉個(gè)例子:
 
 
 
 
上面代碼結(jié)果按鈕大小如下圖:

我把html設(shè)置成10px是為了方便我們計(jì)算,為什么6rem等于60px。如果這個(gè)時(shí)候我們的.btn的樣式不變,我們?cè)俑淖僪tml的font-size的值,看看按鈕發(fā)生上面變化:
 
按鈕大小結(jié)果如下:

 
其實(shí)從上面兩個(gè)案例中我們就可以計(jì)算出1px多少rem:
第一個(gè)例子:
120px = 6rem * 20px(根元素設(shè)置大值)
第二個(gè)例子:
240px = 6rem * 40px(根元素設(shè)置大值)
推算出:
10px  = 1rem 在根元素(font-size = 10px的時(shí)候);
 
20px  = 1rem 在根元素(font-size = 20px的時(shí)候);
40px  = 1rem 在根元素(font-size = 40px的時(shí)候);
在上面兩個(gè)例子中我們發(fā)現(xiàn)第一個(gè)案例按鈕是等比例放大到第二個(gè)按鈕,html元素的font-size的改變就會(huì)導(dǎo)致按鈕的大小發(fā)生改變,我們并不需要改變先前給按鈕設(shè)置的寬度和高度,其實(shí)這就是我們最想看到的,為什么這么說?
我們?cè)贑SS初始化時(shí),引用這一段CSS:
 


這個(gè)時(shí)候如果通過chrome瀏覽器的調(diào)試工具去切換demo在不同設(shè)備下的展示效果,或者通過縮放瀏覽器的寬度來查看效果,我們可以看到不管在任何分辨率下,頁面的排版都是按照等比例進(jìn)行切換,并且布局沒有亂。
當(dāng)然,通過css的媒體查詢并不能做到十分精確,但已經(jīng)能夠滿足一般性的需求了,下一次,將帶大家繼續(xù)探尋rem的神奇之處:使用JS動(dòng)態(tài)設(shè)置rem,敬請(qǐng)期待!
 
本文版權(quán)歸黑馬程序員UI培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!
作者:黑馬程序員UI培訓(xùn)學(xué)院
首發(fā):http://m.409rqu1.cn/news/ui.html 
分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!