[配置]rem设置

背景：

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

选型：

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

博文通览提示：

点击此超链接跳转到Tom哥的博文分类和索引页面 

Tom哥的博客博文分类和索引页面地址：https://blog.csdn.net/tom_wong666/article/details/84137820