如何在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(设置图的像素大小)做到动态控制了

Answer 2

找到index.html文件
插入

<script>
//author:caibaojian
    //website:http://caibaojian.com
    //weibo:http:weibo.com/kujian
    //兼容UC竖屏转横屏出现的BUG
    //自定义设计稿的宽度：designWidth
    //最大宽度:maxWidth
    //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
    ;(function(designWidth, maxWidth) {
      var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

      function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
      }

      if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
      } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
      }
      //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
      refreshRem();

      win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
      }, false);

      win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
        }
      }, false);

      if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
      } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
          doc.body.style.fontSize = "16px";
        }, false);
      }
    })(750, 750);
</script>

1rem = 100px

Answer 3

看这个

Answer 4

这个和vue关系应该不大吧。。。
1.如果没有用第三方UI组件库，可以在页面直接引入你要动态调整font-size的js。比如阿里的flexble.js
2.如果用了第三方UI组件库，比如vux，mint，可以在官方github上issue区里搜索rem 肯定会有相应的方案。

Answer 5

推荐使用集成好的一个脚手架，https://github.com/cloud-temp...。 里面集成了：
1，阿里的 flexble.js ，动态根据设备的dpr计算根节点的 font-size
2，引入的 postcss-pxtorem，解决了 px 自动转换 rem 的问题