rem自适应

90 阅读1分钟
<script>

    //屏幕适应
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var htmlclientWidth = html.clientWidth <= 1280 ? 1280 : html.clientWidth;
            var k = 1920;
            html.style.fontSize = htmlclientWidth / k * 100 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);
</script>
    <script>
        //屏幕适应
        (function (win, doc) {
            if (!win.addEventListener) return;
            var html = document.documentElement;
            function setFont() {
                var html = document.documentElement;
                var k = 1980;
                html.style.fontSize = html.clientWidth / k * 100 + "px";
                // console.log('rem='+html.style.fontSize);
            }
            setFont();
            setTimeout(function () {
                setFont();
            }, 300);
            doc.addEventListener('DOMContentLoaded', setFont, false);
            win.addEventListener('resize', setFont, false);
            win.addEventListener('load', setFont, false);
        })(window, document);
    </script>

    <style>
      *{margin:0;padding:0;}
      html{
        width: 100%;
        height: 100%;
      }
      body{
        width: 100%;
        height: 100%;
      }
      div,span,p{
        font-size: .18rem;
      }
    </style>