如何在vue移动端项目中使用rem

Question

以前项目中动态控制html的字体大小, 让页面元素自适应不同机型的屏幕，请教：用vue怎么实现这一功能，或者有其他什么好插件也期待您的推荐在线等 多谢

Answer 1

在根目录的index.html动态设置基础像素的大小

  <script>
    function setRootFontSize() {      /*获取屏幕的宽度*/
      let width = document.documentElement.clientWidth || document.body.clientWidth      /*屏幕小于414px会改变基础像素，大于等于414px的屏幕基础像素为13px不变*/
      if (width < 414) {        document.documentElement.style.fontSize = width / 375 * 13 + 'px'
      }else {        document.documentElement.style.fontSize = '13px'
      }
    }
    setRootFontSize()    window.addEventListener('resize', function () {
      setRootFontSize()
    }, false)</script>

在scss文件中写一个mixin函数

/*将px转换成rem*/
@function px2rem($px) {
  @return $px / 13 + rem;
}

将文件写成公共的样式文件，或者用的时候引入
以上做完
直接使用px2rem(设置图的像素大小)做到动态控制了