rem.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>rem</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="global.import.css">
    <link rel="stylesheet" href="rem.css">
    <!-- 计算rem的基准值，必须放到head标签里 -->
    <script>
        (function (win,doc,flag){
            var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
                docEl = doc.documentElement;
            docEl.style = 'width:100vw';
            if (docEl.style.width.match('vw')) return true;
            function setFont(){
                switch(flag){
                    case 'height':
                        var flagValue = Math.max(docEl.clientHeight, win.innerHeight),
                            fontSize = 100*(flagValue/667)||100;                        
                        break;
                    default:
                        var flagValue = Math.max(docEl.clientWidth, win.innerWidth),
                            fontSize = 100*(flagValue/375)||100;
                }
                if (fontSize < 60) fontSize = 60;
                if (fontSize > 120) fontSize = 120;
                docEl.style.fontSize = fontSize + 'px';                
            }  
            win.addEventListener(resizeEvt, setFont, false);
            setFont();
        })(window,document,'height'); 
    </script>  
</head>
<body>

    <div class="box"></div>

    <p class="text">文字</p>

</body>
</html>