關於rem實現屏幕自適應佈局的討論還是比較多的，剛好我也看到使用rem實現自適應的web app，所以也來湊下熱鬧。 說起rem，免不了要聯繫到em、px，這裡簡單提提他們的定義和特點。 1. px：像素（Pixel），相對長度單位。像素px是相對於顯示器屏幕解析度而言的，手機上的100px和電腦上 ...
關於rem實現屏幕自適應佈局的討論還是比較多的，剛好我也看到使用rem實現自適應的web app，所以也來湊下熱鬧。
說起rem，免不了要聯繫到em、px，這裡簡單提提他們的定義和特點。
1. px：像素（Pixel），相對長度單位。像素px是相對於顯示器屏幕解析度而言的，手機上的100px和電腦上的100px其實絕對長度是不一樣的，肉眼就能看出來，嚴謹的你可以用尺子量一下，這就是因為他們的解析度不同。還有相當多的人認為px是絕對單位，這裡告訴大家不要人與亦雲，多思考。
2. em：相對於當前對象內文本的字體尺寸，會繼承父級的字體尺寸。也就是說 1em=1*父級元素的font-size。明顯，在多層嵌套的結構下使用em的話，由於層層繼承的緣故，要確定最終呈現出來的尺寸會非常麻煩，過於混亂。
3. rem：相對於html根元素文本的字體尺寸，與中間層字體尺寸無關。也就是說 1rem=1*html元素的font-size。rem就相當於是一個全局縮放因數，改變它一個就可以縮放所有以它為單位的元素，只要將它與屏幕解析度關聯起來，就可以完成屏幕自適應展現。
關於rem實現自適應的具體解釋可以看看isux組的這篇文章：https://isux.tencent.com/web-app-rem.html，裡面實現自適應有兩個途徑，分別是media查詢和js動態計算。提問區裡面說到如果只是在頁面底部用js動態計算的話，頁面元素尺寸改變時會有一定的閃爍現象。建議是先在css里根據屏幕用@media初始化一遍html 的font-size，然後再用js計算。提問區裡面還有人問js代碼的，這樣的問題博主都沒興趣回答了，我貼一份吧。
1 <script> 2 (function (doc, win) { 3 var docEl = doc.documentElement, 4 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 5 recalc = function () { 6 var clientWidth = docEl.clientWidth; 7 if (!clientWidth) return; 8 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 9 }; 10 11 if (!doc.addEventListener) return; 12 win.addEventListener(resizeEvt, recalc, false); 13 doc.addEventListener('DOMContentLoaded', recalc, false); 14 })(document, window); 15 </script>View Code
rem的優勢
使用rem的優勢非常明顯了，尤其是在現在屏幕解析度千差萬別的時代，只要將rem與屏幕解析度關聯起來就可以實現頁面的整體縮放，所以設備上的展現都統一起來了。而且現在瀏覽器基本都已經支持rem了，相容性也非常的好。在上文提問區中還有一些人說“QQX5內核瀏覽器不支持rem單位，在大部分android 機上的微信頁面不起作用”，我表示沒這樣的事，還是那句話，多思考多驗證。
rem的劣勢
其實rem的優勢也正是他的缺點，rem的屏幕自適應與當前兩大平臺的設計哲學不一致！從用戶體驗上來看，文字閱讀的舒適度跟媒體介質大小是沒關係的。簡單的來說，你本來喜歡麻將那麼大的紅燒肉，一口一塊爽爆了，但是服務員換了個大盤子，就給你上了砂鍋那麼大的一整塊肉。因為盤子大了肉也要成比例放大~~
VS 
無論盤子大小，你都希望能一口吃下那塊肉，文字閱讀也是一樣。字體根據媒介縮放是因為屏幕太小的時候，為了呈現更多的內容，因為頻繁翻頁的用戶體驗也是很差的。另外，圖片視頻的尺寸不應該隨意縮放，如果圖片視頻的寬高都用rem關聯起來， 這樣雖然是等比縮放了，但是有時候我們並不想圖片被放大。你看下圖，對吧。
VS 
還有就是圖片像素不高的時候，小屏到大屏的放大會讓圖片變模糊，這樣還不如小尺寸看著順眼。
關於優劣勢的討論可以看知乎上的討論，我也引用了大神們的觀點，標明一下出處哈。http://www.zhihu.com/question/21504656?
總體上來說，使用rem的優勢遠遠大於劣勢，對於上文提到的問題點，使用px+rem的方式還是可以得到很好的用戶體驗的。一般rem用於需要跟隨屏幕變化的尺寸（這不是廢話嗎？），px用於字型大小，細邊框等不應該隨屏幕變化的元素上。在web APP中，rem的使用肯定會越來越普遍的，大家就慢慢探索吧。還是那句話，多思考，多從用戶的角度思考問題，這才是前端思維。
PS：關於rem的一些小問題
1）html的font-size設置到12px以下還是會按照12px=1rem來計算，這樣所有使用了rem單位的尺寸都是錯的。原因看2)。話說，直接設置為100px不好麽？body再設置要用的字型大小不就好了？
2）百度谷歌出來的結果裡面，html{font-size:62.5%}的設置一大堆，不推薦使用這種方式，多此一舉，簡直愚蠢！這裡利用了瀏覽器預設字型大小16px，16*62.5=10px，為何不直接設置為10px呢？但是設置為10px也是不好的，子元素繼承了10px的字體大小也是沒用的，因為chrome瀏覽器預設最小字體是12px。當然你有一萬種改預設設置的辦法，把字體設置到1px大小都可以。看看上文說的閱讀體驗，你確定要把字體設得那麼小，讓你的用戶都眯成了鬥雞眼？
問題暫時發現就這2個，如果你發現有其他問題，可以發在討論區，咱們聊聊。
總結就到這裡了，聽說放點美圖可以拉高文字質量呢，都是自拍哦~~
