您对Rem的兼容性了解多少？

顺便说一下，手机上使用的单位都是rem；因此对于经常编写移动页面的程序员来说，rem的频率非常高. 尽管还有其他不错的选择（VW），但我认为每个人都可以使用rem，并且兼容性会更好（以下链接可以直接查看兼容性）------我可以使用，所以我只修改rem兼容性在这里. 下面是rem和vw的兼容性图

雷姆

大众

我前段时间做了一个简单的活动页面，当然，现在都是手机+ PC，不用说PC是px；手机端是雷姆；但在其他浏览器中，rem;可以在UC浏览器中找到（这应该是移动浏览器的旧版本. 此处的UC旧版本不太可能是Android 2.1之前的版本）. 那为什么呢？

像大多数程序员一样，我在百度方面遇到问题. 在我更改了几个关键字并最终百度加入之后，我说互联网上使用的rem计算方法是向html标签动态添加样式，但是对于UC，换句话说，他不认可这种书写方式；

有没有解决办法？答: 是的，它是使用动态生成的样式标签来添加计算出的html的字体大小，最后将其添加到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)

编写代码后，我当然要对其进行测试. 我在Google Chrome浏览器下进行了模拟. 结果仍然与直接在html标签上的先前计算相同. 满足要求，实现了UC浏览器的兼容性.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shumachanpin/article-300212-1.html