大屏幕适配小屏幕

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<script>
        var tid,
            doc=document,
            docEl = doc.documentElement;
         var refreshRem = function () {
                    var clientWidth = docEl.clientWidth;
                    if (clientWidth >= 1920) {
                        docEl.style.fontSize = '10px'; //1rem  = 10px
                    } else {
                        docEl.style.fontSize = 10 * (clientWidth / 1920) + 'px';
                    }
                };
         addEventListener('resize', function () {
               clearTimeout(tid);
               tid = setTimeout(refreshRem, 300);
           }, false);
         addEventListener('pageshow', function (e) {
               if (e.persisted) {
                   clearTimeout(tid);
                   tid = setTimeout(refreshRem, 300);
               }
           }, false);
           refreshRem();
</script>

然后 css 改用下面的那种单位，上面第二种方法 相当于 1rem=10px

.div{
    text-align: center;
    height:200px;
    line-height: 46px;
}

/改为下面的/

.div{
    text-align: center;
    height:20rem;
    line-height: 4.6rem;
}

————————————————
原文链接：https://blog.csdn.net/qq_42033668/article/details/109717401