Rem兼容知多少？

話說，在手機端使用的單位都是rem;所以對於經常寫手機頁面的程序猿來說rem的使用頻率很高，雖然現在有些其他好的替代方案（VW）但是我考慮到rem大家用的比較多而且兼容性會好點(后面鏈接可以直接查看兼容性)------- Can I use，所以我這里只對rem兼容進行修正。下面附上rem和vw的兼容圖

 

rem

 

vw

 

在前段時間做了一個簡單的活動頁面，當然啦，現在都是手機+PC的，PC不用說是px；手機端是rem; 然而在其他瀏覽器好好的rem；發現在UC瀏覽器（這里應該是舊版的手機瀏覽器，這里的UC舊版不太可能是比安卓2.1在前的版本）居然不支持rem；那么是為什么？

我跟大多數程序猿一樣，遇到問題就百度，在我換了好幾個關鍵詞終於百度到了，說是網上一直使用的rem計算方法是動態的給html標簽添加樣式，然而對於UC來說，他不認這樣的寫法；

那么有方案解決？ 答案：有，就是使用動態生成style標簽添加計算好的html的font-size並最終添加在head標簽里面。嗯嗯，方案是有了，要如何修改之前的代碼？下面是網上通用的

 

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

 

根據上面所說的解決方法我把代碼實現了，下面是我具體實現的代碼

 

(function (win,doc){
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        html,
        htmlW,
        fontSize,
        rem,
        recalc = function(){
            html = doc.documentElement
            htmlW = html.clientWidth < 750 ? html.clientWidth : 750 //最大 1rem = 100px;
            fontSize = htmlW / 7.5  // 默認按照 IPhone 6 ,1rem = 50px;
            rem = doc.getElementById('rem') || null
            if (rem) {
                rem.parentNode.removeChild(rem)
            }
            /* 創建style標簽並添加到Head標簽里去 */
            if(doc.all){
                // IE寫法
                win.style="html{font-size:" + fontSize + "px;}";
                win.style.id ='rem';
                doc.createStyleSheet("javascript:style");
            }else{
                // 其他標准瀏覽器寫法
                var style = doc.createElement('style');
                style.id = 'rem';
                style.type = 'text/css';
                style.innerHTML="html{font-size:" + fontSize + "px;}";
                doc.getElementsByTagName('HEAD').item(0).appendChild(style);
            }
        }
     if (!doc.addEventListener){
         return;
     }
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(window, document)

 

寫完代碼當然是要測試一下，我在谷歌瀏覽器下模擬一下，效果還是跟之前的在html標簽上直接計算一樣。符合要求，實現了UC瀏覽器的兼容。