首页 > 其他 > 详细

vue : rem自适应的应用

时间:2019-02-21 10:19:58      阅读:190      评论:0      收藏:0      [点我收藏+]

我们知道,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);
        
    },
...

以上。

 

vue : rem自适应的应用

原文:https://www.cnblogs.com/foxcharon/p/10410433.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!