Rem在移动端的适配

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <script>
         (function (doc, win) {
            var element = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                // 设计稿的宽度
                designWidth = 750,
                calc = function () {
                    var clientWidth = element.clientWidth;
                    // 定一个最大的宽度,以免全屏后难看
                    if (clientWidth > 677) {
                        clientWidth = 677
                    };
                    if (!clientWidth) return;
                    element.style.fontSize = 40 * (clientWidth / designWidth) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, calc, false);
            doc.addEventListener('DOMContentLoaded', calc, false);
        })(document, window);
    </script>
</head>

<body></body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_40629244/article/details/86690238