原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

背景：

移动项目或者响应式网站需要尺寸自适应；

选型：

rem；

rem定义：

相对长度单位，相对于根元素(即html元素)font-size计算值的倍数；

设置函数：

    resizeFontSize(){
      //获取根元素
      const docEl = document.documentElement;
      //获取设备宽度
      const {clientWidth} = docEl;
      //若未获取到设备宽度，则终止函数执行
      if (!clientWidth) return ;
      //计算rem基础配置：设计图以750px为准时，px rem比例为1：100
      const fs= 100*(clientWidth/750) ;
      //为根元素字体赋值
      docEl.style.fontSize = `${fs}px`;
    }

调用时机：

我做的验证demo是用的vue框架，在APP.vue的钩子函数mounted里调用：

  mounted() {
    this.resizeFontSize();
  },

如果是普通响应式网页，建议在窗口尺寸变更时调用：

    //当窗口尺寸变更时
    window.onresize=function () {
        resizeFontSize()
    }

备注：此设置已验证OK，需要看源码的同学，可以克隆如下项目查看(在App.vue文件中)：
demo的github地址：https://github.com/tom-wong666/xiaoa.git