用rem實現WebApp自適應的優劣分析

關於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個，若是你發現有其餘問題，能夠發在討論區，我們聊聊。

總結就到這裏了，據說放點美圖能夠拉高文字質量呢，都是自拍哦~~