大屏自适应rem

方法一:用原生JS写  此方法有一些问题,以下方法会更优一些

大概原理:rem是相对根元素,因此我们只需要在根元素确定一个px或rem字号,则可以来算出元素的宽高,在页面加载时,计算出根元素的字体大小,就可以达到控制整个页面的缩放,代码如下:

function bodyScale() {
      var devicewidth = document.documentElement.clientWidth;
      var scale = devicewidth / 3200;
      document.documentElement.style.fontSize=(devicewidth/3200).toString()+'rem'
    }
    window.onload = window.onresize = function () {
        bodyScale();
    };

PS:如果当初是以设计稿px输出的,则我们可以通过插件,把页面中所有的px转换成rem,

方法二:用jquery

<script src="../baidumap/jquery-3.2.1.min.js"></script>
  <script>
    $(document).ready(function(){
        var whei=$(window).width()
        $("html").css({fontSize:(whei/3200)+'rem'})
        $(window).resize(function(){
            var whei=$(window).width()
          $("html").css({fontSize:(whei/3200)+'rem'})
        });
    });
</script>