在用前端給移動端頁面寫布局時番舆，我接觸到了Rem布局，但是老實說我也看了幾篇手淘適配的文章贪婉，并且主要的目的是拿到代碼寫出demo，所以對于Rem我還是停留在只會使用的階段卢肃，但是理解的并不透徹疲迂，所以要抽出時間，把rem布局的原理搞清楚莫湘。
什么是em
我相信所有接觸學(xué)習(xí)過css布局的同學(xué)尤蒿，一定在rem之前先聽到過em的大名，但是大多數(shù)也許跟我一樣幅垮，只是聽過或者最多跟著W3C上的教程敲過一下demo腰池，之后的工作學(xué)習(xí)中并沒有使用em這個單位，那么在聊rem之前，我們先聊聊em示弓，畢竟混淆這兩個單位的同學(xué)還是存在的讳侨。
用戶的瀏覽器渲染的默認字體大小是"16px"，換句話說奏属，Web頁面中“body”的文字大小在瀏覽器下默認渲染是"16px"跨跨。當(dāng)然，如果用戶愿意也可以改變這個字體大小囱皿。而"em"是一個相對的大小勇婴，它的大小是相對于元素父元素的font-size。比如在body下直接寫一個p標簽嘱腥，并且設(shè)置這個p標簽的字體大小是"2em", 那么其文字大小計算出來就是相當(dāng)于2 * 16px = 32px耕渴。一個例子就能明了，em是相對于當(dāng)前元素的父元素的font-size齿兔。而之前的彈性設(shè)計橱脸，有一個關(guān)鍵地方就是Web的所有元素都使用“em”單位。
體驗后愧驱，是不是覺得彈性布局的頁面很靈活呀慰技，而且也像“px”一樣的精確。因此组砚，只要我們掌握了“font-size”、“px”和“em”之間的基本關(guān)系掏颊，我們就可以快速使用CSS創(chuàng)建精確的布局糟红。
什么是Rem
看完了剛才em的介紹，是不是對于em的概念逐漸清晰乌叶，并且希望用em去構(gòu)建自己的彈性布局呢盆偿。且慢，心急吃不了熱豆腐准浴，不妨聽我把rem也慢慢的介紹完事扭，畢竟主角光環(huán)的都是最后才出場的。rem是css3引入的一個單位乐横，那我們?yōu)槭裁匆谟衑m這個可以充當(dāng)彈性布局的單位時還要引入rem呢求橄？
em可以讓我們的頁面更靈活，比起到處寫死的px值葡公，em顯得更有張力罐农，根據(jù)比例的變化來調(diào)節(jié)屏幕。有的人提出用em來做彈性布局的頁面催什，但是還是兔內(nèi)污涵亏！如果你想一邊看著標注圖，一邊算著em值，那你可以試試哦气筋。不過聰明的程序員是不會去做這么無腦的事情的拆内，所以有人寫過px和em轉(zhuǎn)換的計算器。但是你有沒有想過宠默，如果有一天麸恍，你的父節(jié)點的字體大小發(fā)生了變化，那么對于全局可能會產(chǎn)生相當(dāng)大的影響光稼，手算的同學(xué)是不是要全部重新計算或南，唉，害怕的我直接去寫px了艾君。??采够！
所以針對這種繁瑣運算的情況，rem應(yīng)運而生冰垄，我們是這樣定義rem的：
rem作用于非根元素時蹬癌，相對于根元素字體大小虹茶；rem作用于根元素字體大小時逝薪，相對于其出初始字體大小
rem的取值有兩種情況，就是設(shè)置根元素和非根元素的時候蝴罪，下面看個例子：
html {
font-size: 2rem;
}
html是我們html頁面的根元素董济，之前介紹em的時候，我們就知道瀏覽器默認渲染的字體大小是16px要门，所以html的字體大小是2rem虏肾，那么rem作用于根元素的字體大小相當(dāng)于其初始字體大小的定論的話，html的字體大小就是32px欢搜。
p {
font-size: 2rem;
}
而上面p標簽的這個例子中封豪，我們之前已經(jīng)知道html的字體大小是32px，那么p標簽的字體大小就是2 * 32px = 64px炒瘟。
所以如果我們能合理的設(shè)置根元素的字體大小吹埠，那么rem的計算就會變得非常容易，比如手淘提出的將屏幕等寬劃分成100份疮装，那么標注圖上的10px缘琅，即為0.1rem。所有的標注值除以100即可斩个，根本不需要有計算的過程胯杭。
其實rem布局的本質(zhì)也就是等比縮放，一般是基于寬度受啥，假設(shè)我們將屏幕寬度平均分成100份做个，每一份的寬度用x表示鸽心。 x = 屏幕寬度 / 100, 如果將x作為單位，x前面的數(shù)值就代表屏幕寬度的百分比居暖。
p { width: 50x } //屏幕寬度的50%
而理解到這里顽频，其實我們也就知道我們讓頁面最上面跑的js代碼到底是什么意思了，我們就是需要讓html元素字體的大小太闺，恒等于屏幕寬度的1/100糯景。那1rem和1x就等價了。
rem我們就分析到這里省骂，到這里蟀淮，可能有人會覺得在這個比較之下，em似乎完全沒有用武之地钞澳，但是一個技術(shù)的存在肯定是得到很多使用者的肯定的怠惶，也是設(shè)計者幾經(jīng)考量才能決定放出使用的，所以技術(shù)沒有高低轧粟，只是他們適用的場景策治，rem可能更適合寫布局，而em可能就更適合來表達字體大小兰吟。所以我們要探究原理通惫，選擇合適的技術(shù)，提高自己的工作效率和作品質(zhì)量混蔼。
今天的探究就到這里履腋，rem的代碼我就不貼了，手淘的代碼一搜一大把呢惭嚣。
