vue : rem自适应的应用

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

===

（在原生项目中使用）

rem.js

(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);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入rem -->
    <script src="./js/rem.js" type="text/javascript"></script>
    <title>...</title>
</head>
...

以上。

 

posted on 2019-02-21 09:25  fox_charon  阅读(864)  评论(0)  编辑  收藏  举报

导航