rem(font size of the root element)是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位??吹絩em大家一定會想起em單位,em(font size of the element)是指相對于父元素的字體大小的單位。它們之間其實很相似,只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
這里我特別強調web app,web page就不能使用rem嗎,其實也當然可以,不過出于兼容性的考慮在web app下使用更加能突顯這個單位的價值和能力接下來我們來看看一些企業的web app是怎么做屏幕適配的。
最近iphone6一下出了兩款尺寸的手機,導致的移動端的屏幕種類更加的混亂,記得一兩年前做web app有一種做法是以320寬度為標準去做適配,超過320的大小還是以320的規格去展示,這種實現方式以淘寶web app為代表作,但是近期手機淘寶首頁進行了改版,采用了rem這個單位,首頁以內依舊是和以前一樣各種混亂,有定死寬度的頁面,也有那種流式布局的頁面。
我們在在作頁面布局的使用常用的單位是px,這是一個絕對單位,web app的屏幕適配有很多中做法,例如:流式布局、限死寬度,還有就是通過響應式來做,但是這些方案都不是最佳的解決方法。
例如流式布局的解決方案有不少弊端,它雖然可以讓各種屏幕都適配,但是顯示的效果極其的不好,因為只有幾個尺寸的手機能夠完美的顯示出視覺設計師和交互最想要的效果,但是目前行業里用流式布局作web app的公司非常多,看看下面我收集的一些案例:
亞馬遜:
攜程:
蘭亭:
上面的網站都是采用的流式布局的技術實現的,他們在頁面布局的時候都是通過百分比來定義寬度,但是高度大都是用px來固定住,所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長,但是高度還是和原來一樣,實際顯示非常的不協調,這就是流式布局的最致命的缺點,往往只有幾個尺寸的手機下看到的效果是令人滿意的,其實很多視覺設計師應該無法接受這種效果,因為他們的設計圖在大屏幕手機下看到的效果相當于是被橫向拉長來一樣。
流式布局并不是最理想的實現方式,通過大量的百分比布局,會經常出現許多的bug,還有就是對設計師的設計有很多的限制,因為他們在設計之初就需要考慮流式布局,只能設計橫向拉伸的元素布局,設計的時候存在很多局限性。
還有一種是固定頁面寬度的做法,早期有些網站把頁面設置成320的寬度,超出部分留白,這樣做視覺,前端都挺開心,視覺在也不用被流式布局限制自己的設計靈感了,前端也不用在搞坑爹的流式布局。但是這種解決方案也是存在一些問題,例如在大屏幕手機下兩邊是留白的,還有一個就是大屏幕下看起來頁面會特別小,手機淘寶首頁起初是這么做的,但近期改版了,可是天貓首頁還沒改版。
響應式這種方式在國內很少有大型企業的復雜性的網站在移動端用這種方法去做,主要原因是工作大,維護性難,所以一般都是中小型的門戶或者博客類站點會采用響應式的方法從web page到web app直接一步到位,因為這樣反而可以節約成本,不用再專門為自己的網站做一個web app的版本。
< meta name = "viewport" content = "width = 320 , maximum - scale = 1 .3 , user - scalable = no" >
天貓的web app的首頁就是采用這種方式去做的,以320寬度為基準,進行縮放,最大縮放為320*1.3 = 416,基本縮放到426都就可以兼容iphone6 plus的屏幕了,這個方法簡單粗暴,又高效。說實話我覺得他和用接下去我們要講的rem都非常高效,不過有部分同學使用過程中反應縮放過程中有些糊,具體我使用沒怎么遇到過這種情況。
上面講了一大堆目前大部分公司主流的一些web app的適配解決方案,接下來講下rem是如何工作的。
上面說過rem是通過根元素進行適配的,網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小。舉個例子:
html { font-size: 20px ; } .btn { width: 6rem ; height: 3rem ; line-height: 3rem ; font-size: 1.2rem ; display: inline-block ; background: #06c ; color: #fff ; border-radius: .5rem ; text-decoration: none ; text-align: center ; }
Demo
上面代碼結果按鈕大小如下圖:
我把html設置成10px是為了方便我們計算,為什么6rem等于60px。如果這個時候我們的.btn的樣式不變,我們再改變html的font-size的值,看看按鈕發生上面變化:
html { font-size: 40px ; }
Demo
按鈕大小結果如下:
上面的width,height變成了上面結果的兩倍,我們只改變了html的font-size,但.btn樣式的width,height的rem設置的屬性不變的情況下就改變了按鈕在web中的大小。
其實從上面兩個案例中我們就可以計算出1px多少rem:
第一個例子:
120px = 6rem * 20px(根元素設置大值)
第二個例子:
240px = 6rem * 40px(根元素設置大值)
推算出:
10px = 1rem 在根元素(font-size = 10px的時候);
20px = 1rem 在根元素(font-size = 20px的時候);
40px = 1rem 在根元素(font-size = 40px的時候);
在上面兩個例子中我們發現第一個案例按鈕是等比例放大到第二個按鈕,html font-size的改變就會導致按鈕的大小發生改變,我們并不需要改變先前給按鈕設置的寬度和高度,其實這就是我們最想看到的,為什么這么說?接下來我們再來看一個例子:
Demo
由上面兩個的demo中我們知道改變html的font-size可以等比改變所有用了rem單位的元素,所以大家可以通過chrome瀏覽器的調試工具去切換第三個的demo在不同設備下的展示效果,或者通過縮放瀏覽器的寬度來查看效果,我們可以看到不管在任何分辨率下,頁面的排版都是按照等比例進行切換,并且布局沒有亂。我只是通過一段js根據瀏覽器當前的分辨率改變font-size的值,就簡單的實現了上面的效果,頁面的所有元素都不需要進行任何改變。
首先假設我上面的頁面設計稿給我時候是按照640的標準尺寸給我的前提下,(當然這個尺寸肯定不一定是640,可以是320,或者480,又或是375)來看一組表格。
上面的表格藍色一列是Demo3中頁面的尺寸,頁面是以640的寬度去切的,怎么計算不同寬度下font-site的值,大家看表格上面的數值變化應該能明白。舉個例子:384/640 = 0.6,384是640的0.6倍,所以384頁面寬度下的font-size也等于它的0.6倍,這時384的font-size就等于12px。在不同設備的寬度計算方式以此類推。
Demo3中我是通過JS去動態計算根元素的font-size,這樣的好處是所有設備分辨率都能兼容適配,淘寶首頁目前就是用的JS計算。但其實不用JS我們也可以做適配,一般我們在做web app都會先統計自己網站有哪些主流的屏幕設備,然后去針對那些設備去做media query設置也可以實現適配,例如下面這樣:
html { font-size : 20px ; } @media only screen and ( min - width : 401px ) { html { font-size: 25px ! important ; } } @media only screen and ( min - width : 428px ) { html { font-size: 26.75px ! important ; } } @media only screen and ( min - width : 481px ) { html { font-size: 30px ! important ; } } @media only screen and ( min - width : 569px ) { html { font-size: 35px ! important ; } } @media only screen and ( min - width : 641px ) { html { font-size: 40px ! important ; } }
上面的做的設置當然是不能所有設備全適配,但是用JS是可以實現全適配。具體用哪個就要根據自己的實際工作場景去定了。
下面推薦兩個國內用了rem技術的移動站,大家可以上去參考看看他們的做法,手機淘寶目前只有首頁用了rem,native app的首頁是內嵌的web app首頁。
淘寶首頁:m.taobao.com
D X:m.dx.com
更多rem — 低調的css單位相關文章請關注PHP中文網!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com