vue : rem自適應的應用

咱們知道，rem是一個css單位，指的是HTML根節點的字體大小。javascript

而咱們在用rem佈局的時候必然會遇到一個問題：咱們須要根據用戶的屏幕大小去計算rem。html

如下是代碼。java

（在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); }, ...

===字體

（在原生項目中使用）ui

rem.jsspa

(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.htmlcode

<!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> ...

以上。htm