Rem兼容知多少？

话说，在手机端使用的单位都是rem;所以对于经常写手机页面的程序猿来说rem的使用频率很高，虽然现在有些其他好的替代方案（VW）但是我考虑到rem大家用的比较多而且兼容性会好点(后面链接可以直接查看兼容性)------- Can I use，所以我这里只对rem兼容进行修正。下面附上rem和vw的兼容图

rem

在前段时间做了一个简单的活动页面，当然啦，现在都是手机+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浏览器的兼容。

猜你喜欢