rem与px换算的计算方式
前言
這段時(shí)間的小項(xiàng)目中算是真正意義上使用了rem來進(jìn)行移動(dòng)端的頁面布局,項(xiàng)目結(jié)束了我反思了一下之前的對于rem的使用...原來我以前對rem用法完全是在搞笑啊!!結(jié)合這次這個(gè)小項(xiàng)目,我覺得我也有必要對rem布局以及用法進(jìn)行一次總結(jié)。
ps.文筆可能不太好...
1.什么是rem
來自于鵝廠ISUX團(tuán)隊(duì)的解釋如下:rem(fontsizeoftherootelement)是指相對于根元素的字體大小的單位。簡單的說它就是一個(gè)相對單位。看到rem大家一定會(huì)想起em單位,em(fontsizeoftheelement)是指相對于父元素的字體大小的單位。它們之間其實(shí)很相似,只不過一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。
所以這里總結(jié)一句,所謂依賴根元素來計(jì)算的方式,就是先給予html元素一個(gè)font-size,然后我們所有的rem就根據(jù)這個(gè)font-size來計(jì)算
例如:
| 1 |
|
那么我們這里的1rem就應(yīng)該這么來計(jì)算:1x16=16px=1rem;瀏覽器默認(rèn)為16px可能造成rem計(jì)算上的麻煩和多位小數(shù),所以,我們也可以進(jìn)行這種方式的初始化根元素:
|
1 2 3 |
|
這樣初始化之后,我們來進(jìn)行rem計(jì)算的時(shí)候,就會(huì)減少許多的麻煩。
2.設(shè)置viewport配合進(jìn)行縮放
通常在寫移動(dòng)端頁面的時(shí)候,我們都會(huì)設(shè)置viewport,保證頁面縮放沒有問題,最常見的viewport的meta標(biāo)簽如下:
| 1 |
|
這個(gè)標(biāo)簽的參數(shù)就不再做詳細(xì)解釋,如果有需要了解詳細(xì)的參數(shù)分析與解釋,可以參考我的這篇博文:http://www.cnblogs.com/azhai-biubiubiu/p/5305022.html
至于為什么要加入viewport,我覺得就是因?yàn)楝F(xiàn)在市面上雖然有那么多不同種類不同品牌不同分辨率的手機(jī),但它們的理想viewport寬度歸納起來無非也就 320、360、414、等幾種,都是非常接近的,理想寬度的相近也就意味著我們針對某個(gè)設(shè)備的理想viewport而做出的網(wǎng)站,在其他設(shè)備上的表現(xiàn)也不會(huì)相差非常多甚至是表現(xiàn)一樣的。
3.怎么樣在不同分辨率的情況下計(jì)算根元素需要的font-size的值
關(guān)于這個(gè)點(diǎn),其實(shí)有兩種解決方案,一種是基于CSS的情況,另外一種就要通過js計(jì)算獲得
a.基于CSS
一般我們做頁面,肯定都會(huì)有設(shè)計(jì)圖,移動(dòng)端頁面,一般情況下,UI出圖都會(huì)定寬為640px,這也是移動(dòng)端的標(biāo)準(zhǔn)尺寸;但是,我們也不能排除可能有其他特殊的情況可能需要做其他大小的設(shè)計(jì)圖。所以,我們可以先定一個(gè)基準(zhǔn),然后來看看isux團(tuán)隊(duì)的整理出來的一個(gè)表格:
通過表格,我們能很清楚的看出各種分辨率下該如何計(jì)算,例如:320下的html的font-size就應(yīng)該為320/640=0.5 所以,當(dāng)以640為基準(zhǔn)的font-size是20px時(shí),我們就應(yīng)該給320的定義為10px;
怎么做到基于不同的分辨率來定義呢?不用說,首先想到的肯定就是媒體查詢。當(dāng)我們基于媒體查詢來做屏幕自適應(yīng)時(shí),首先要考慮下需要做那些屏幕,畢竟時(shí)下各種類型的手機(jī)讓人眼花繚亂,分辨率也是多種多樣,這里我做一下簡單的例舉,是我在過往項(xiàng)目中涉及到常見的屏幕分辨率的媒體查詢:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
上述為現(xiàn)階段常見的iPhone系列的媒體查詢,對于安卓方面,我發(fā)現(xiàn)好像只要做好了6p+和6的,基本在安卓主流機(jī)型上的表現(xiàn)都會(huì)很好。但是考慮到有些其他的項(xiàng)目可能會(huì)出現(xiàn)向下兼容較低版本的情況,我這邊提供幾個(gè)媒體查詢的例子,但是具體的數(shù)值,我覺得可能需要大家自行計(jì)算一下。
|
1 2 3 4 5 6 7 8 9 10 11 |
|
b.基于JS進(jìn)行屏幕分辨率計(jì)算
我們來看這么一段js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
其實(shí)有點(diǎn)尷尬的問題在于...這段代碼的詳細(xì)作用我也未能完全理解,但是通過其中的某些關(guān)鍵詞,我先做下大致的分析:
orientationchange:這是一個(gè)事件,菜鳥教程中做了這么一個(gè)解釋:事件是在用戶水平或者垂直翻轉(zhuǎn)設(shè)備(即方向發(fā)生變化)時(shí)觸發(fā)的事件。
以下理解,可能并不是很準(zhǔn)確!!只是讓我自己明白了是個(gè)啥東西!各位千萬別被帶坑里去了!也希望大神在底下指正分析下這段代碼!
其實(shí)這段代碼,主要起到的作用是監(jiān)聽,代碼的核心就是這么一句:
| 1 |
|
這句話決定了幾個(gè)關(guān)鍵:1.基于根元素計(jì)算rem所需要的font-size;2.規(guī)定了設(shè)計(jì)圖的基準(zhǔn)尺寸以及基準(zhǔn)的font-size。所以,在需要用到這段JS的時(shí)候,我們只需要根據(jù)UI設(shè)計(jì)圖,規(guī)定好基準(zhǔn)的font-size和統(tǒng)一的UI設(shè)計(jì)圖尺寸就好了。
基于這段JS,我們的項(xiàng)目處理中也利用了這種方式,但是不同的是并沒有使用JS,而是根據(jù)這種預(yù)定義基準(zhǔn)量的方式,在less中進(jìn)行計(jì)算后得到可以自適應(yīng)的尺寸
|
1 2 3 4 5 |
|
然后看看下面這個(gè)例子:
|
1 2 3 4 5 6 7 8 |
|
例子中的@base就是預(yù)編譯好的,可以進(jìn)行計(jì)算的基準(zhǔn)變量,然后例子中的尺寸變化,我是根據(jù)UI的PSD中百分百尺寸下的測量得到的數(shù)值乘以基準(zhǔn)值。這樣做可能有些麻煩,但是好處在于對于UI的還原度會(huì)特別高,基本可以做到像素級的UI還原,那我們來看看效果:
可以看出,在chrome的移動(dòng)端模擬器下,大、中、小三種分辨率下,布局并沒有產(chǎn)生變化,發(fā)生變化的僅僅只有內(nèi)容而已。在移動(dòng)端代碼中,我們一般只會(huì)定義元素的width,使其height自適應(yīng),但是使用這種變量的形式,height也可以進(jìn)行定義,使我們的CSS更為嚴(yán)謹(jǐn)些。
4.流式布局與rem布局的區(qū)別
在流式布局下:
網(wǎng)頁的主要架構(gòu)部分按照百分比布局,寬度百分比,高度定死;
如果是圖片寬度設(shè)置百分比,高度根據(jù)圖片的比例自適應(yīng),如果是封面圖片可以高度定死,用background-size:cover顯示部分就行;
在rem布局下,之前已經(jīng)說了很多,這里就說下和流式布局的區(qū)別:
rem布局需要基于根元素的基準(zhǔn)量來做的,不同屏幕分辨率設(shè)置不同的基準(zhǔn)量,那么對UI的還原度就會(huì)很高,但是...發(fā)現(xiàn)了一個(gè)rem的問題...就是如果頁面設(shè)計(jì)比較看重元素間隔和高度的話...那么用rem布局就會(huì)比較難受
5.總結(jié)下
其實(shí)在實(shí)際項(xiàng)目中,感覺使用rem還是比較方便的,而且學(xué)習(xí)成本也不高。如果有同學(xué)遇到移動(dòng)端項(xiàng)目而不需要考慮PC端的話,rem絕對能讓人寫CSS比較舒服。
學(xué)無止境,以上就是我對rem的一些總結(jié)和整理,希望能對看到這篇博客的人有所幫助,也希望能有大神在評論里指出我的不足之處。
完結(jié)撒花~
總結(jié)
以上是生活随笔為你收集整理的rem与px换算的计算方式的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: DFT测试-OCC电路介绍
- 下一篇: 志邦橱柜坑爹,志邦橱柜大忽悠,志邦橱柜欺