前言

這段時(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	html{font-size:16px;}

那么我們這里的1rem就應(yīng)該這么來計(jì)算：1x16=16px=1rem；瀏覽器默認(rèn)為16px可能造成rem計(jì)算上的麻煩和多位小數(shù)，所以，我們也可以進(jìn)行這種方式的初始化根元素：

1 2 3

html{ font-size=62.5%//這里就是10/16x100%=62.5%也就是默認(rèn)10px的字號 }

這樣初始化之后，我們來進(jìn)行rem計(jì)算的時(shí)候，就會(huì)減少許多的麻煩。

2.設(shè)置viewport配合進(jìn)行縮放

通常在寫移動(dòng)端頁面的時(shí)候，我們都會(huì)設(shè)置viewport，保證頁面縮放沒有問題，最常見的viewport的meta標(biāo)簽如下：

1	<metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

這個(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

@media onlyscreenand (min-device-width:320px)and (-webkit-min-device-pixel-ratio:2) { //針對iPhone4,5c,5s, 所有iPhone6的放大模式，個(gè)別iPhone6的標(biāo)準(zhǔn)模式<br>　　html{<br>　　　　font-size:10px;<br>　　} } @media onlyscreenand (min-device-width:375px)and (-webkit-min-device-pixel-ratio:2) { 　　//針對大多數(shù)iPhone6的標(biāo)準(zhǔn)模式<br>　　html{<br>　　　　font-size:12px;<br>　　} } @media onlyscreenand (min-device-width:375px)and (-webkit-min-device-pixel-ratio:3) { 　　//針對所有iPhone6+的放大模式<br>　　html{<br>　　　　font-size:16px;<br>　　} } @media onlyscreenand (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3) { 　　//針對所有iPhone6+的標(biāo)準(zhǔn)模式,414px寫為412px是由于三星Nexus6為412px，可一并處理<br>　　html{<br>　　　　font-size:20px;<br>　　} }

上述為現(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

@media onlyscreenand (-webkit-device-pixel-ratio:.75){/*低分辨率小尺寸的圖片樣式*/ } @media onlyscreenand (-webkit-device-pixel-ratio:1){/*普通分辨率普通尺寸的圖片樣式*/ } @media onlyscreenand (-webkit-device-pixel-ratio:1.5){/*高分辨率大尺寸的圖片樣式*/ }

b.基于JS進(jìn)行屏幕分辨率計(jì)算

我們來看這么一段js：

1 2 3 4 5 6 7 8 9 10 11 12 13

(function(doc, win) { vardocEl = doc.documentElement, resizeEvt ='orientationchange'inwindow ?'orientationchange':'resize', recalc =function() { varclientWidth = docEl.clientWidth;<br>　　　　　　　window.innerWidth>max ? window.innerWidth : max; if(!clientWidth)return; docEl.style.fontSize = 20 * (clientWidth / 320) +'px'; }; if(!doc.addEventListener)return; win.addEventListener(resizeEvt, recalc,false); doc.addEventListener('DOMContentLoaded', recalc,false); })(document, window);

其實(shí)有點(diǎn)尷尬的問題在于...這段代碼的詳細(xì)作用我也未能完全理解，但是通過其中的某些關(guān)鍵詞，我先做下大致的分析：

orientationchange：這是一個(gè)事件，菜鳥教程中做了這么一個(gè)解釋：事件是在用戶水平或者垂直翻轉(zhuǎn)設(shè)備（即方向發(fā)生變化）時(shí)觸發(fā)的事件。

以下理解，可能并不是很準(zhǔn)確！！只是讓我自己明白了是個(gè)啥東西！各位千萬別被帶坑里去了！也希望大神在底下指正分析下這段代碼！

其實(shí)這段代碼，主要起到的作用是監(jiān)聽，代碼的核心就是這么一句：

1	docEl.style.fontSize = 20 * (clientWidth / 320) +'px';

這句話決定了幾個(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

//htmlfont-size:20-40 //對應(yīng)屏幕寬度320-640 //當(dāng)前設(shè)計(jì)稿是750，我們用設(shè)計(jì)稿100%的寬度來測量比較方便， //所以需要base換算 @base: (640/750)/40rem;//rem是最后算出結(jié)果的單位

然后看看下面這個(gè)例子：

1 2 3 4 5 6 7 8

.tag { display: inline-block; font-size:22*@base; text-align:center; border-radius:20px; margin-bottom:20*@base; padding:10*@base20*@base; }

例子中的@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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。