标签：function vue win 适应 width rem docEl refreshRem

我们知道，rem是一个css单位，指的是HTML根节点的字体大小。

MDN：css单位

而我们在用rem布局的时候必然会遇到一个问题：我们需要根据用户的屏幕大小去计算rem。

以下是代码。（在VUE中使用）

...
    created() {
        
        // rem 适配
        (function(win) {
            var docEl = win.document.documentElement;
            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                if (width >= 1920) {
                    // 最大宽度
                    width = 1920;
                }
                var rem = width / 19.2;
                if (rem > 100) {
                    rem = 100;
                }
                docEl.style.fontSize = rem + "px";
                if (width < 1366) {
                    docEl.style.fontSize = 70 + "px";
                }
            }
            win.addEventListener(
                "resize",
                function() {
                    refreshRem();
                },
                false
            );
            win.addEventListener(
                "pageshow",
                function(e) {
                    if (e.persisted) {
                        refreshRem();
                    }
                },
                false
            );
            refreshRem();
        })(window);
        
    },
...

以上。

标签：function,vue,win,适应,width,rem,docEl,refreshRem
来源： https://www.cnblogs.com/foxcharon/p/10410433.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。