前端大屏自适应js和css

转自：https://blog.csdn.net/qq_42033668/article/details/109717401

分辨率1920*1080，其它分辨率的也可以试试。

第一种方式（类似浏览器Ctrl+鼠标滚轮缩放），目前发现一个缺陷，用到了echarts 会出现鼠标焦点不对应

head 里面加上

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<script>
        var tid,
            doc=document,
            docEl = doc.documentElement;
        docEl.style.zoom=docEl.clientWidth / 1920;

      
        addEventListener('resize', function () {
            clearTimeout(tid);
            tid = setTimeout(function () {
                docEl.style.zoom=docEl.clientWidth / 1920;
                // window.location.reload();
            }, 300);
        }, false);
</script>

第二种方式（推荐 虽然改动较大，实实在在自适应缩放）

<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;
}

在线转换 px转rem工具
http://www.ofmonkey.com/