使用rem来实现不同分辨率界面自适应

使用rem来实现不同分辨率界面自适应

在界面初始化添加以下js

在index.html中加入此段js

<script>
      function handleResize() {
        var htmlWidth = document.documentElement.clientWidth|| document.body.clientWidth
        let htmlDom=document.getElementsByTagName('html')[0]
        htmlDom.style.fontSize= 100 / 1920 * htmlWidth + 'px';
      }
      handleResize();
      window.onresize = handleResize;
</script>

js表示在1920px分辨率下，根元素fontSize为100px，则公式为1rem = 100px。
随着屏幕大小的变化htmlDom.style.fontSize= 100 / 1920 * htmlWidth + 'px';根元素的fontSize不再是100px

示例：当1920的设计稿中的一个div宽度为200px时，可以设置文本fontSize为2rem(按公式1rem = 100px计算)
那么实际界面的展示效果如下
1920px屏幕中width为2rem=200px
1500px屏幕中width为2rem等于156.25px
因此实现了屏幕自适应