如何在vue移動端項(xiàng)目中使用rem

在根目錄的index.html動態(tài)設(shè)置基礎(chǔ)像素的大小

  <script>
    function setRootFontSize() {
      /*獲取屏幕的寬度*/
      let width = document.documentElement.clientWidth || document.body.clientWidth
      /*屏幕小于414px會改變基礎(chǔ)像素，大于等于414px的屏幕基礎(chǔ)像素為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函數(shù)

/*將px轉(zhuǎn)換成rem*/
@function px2rem($px) {
  @return $px / 13 + rem;
}

將文件寫成公共的樣式文件，或者用的時(shí)候引入
以上做完
直接使用px2rem(設(shè)置圖的像素大小)做到動態(tài)控制了

找到index.html文件
插入

<script>
//author:caibaojian
    //website:http://caibaojian.com
    //weibo:http:weibo.com/kujian
    //兼容UC豎屏轉(zhuǎn)橫屏出現(xiàn)的BUG
    //自定義設(shè)計(jì)稿的寬度：designWidth
    //最大寬度:maxWidth
    //這段js的最后面有兩個參數(shù)記得要設(shè)置，一個為設(shè)計(jì)稿實(shí)際寬度，一個為制作稿最大寬度，例如設(shè)計(jì)稿為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 設(shè)置好后才能執(zhí)行 refreshRem，不然 refreshRem 會執(zhí)行2次；
      refreshRem();

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

      win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 瀏覽器后退的時(shí)候重新計(jì)算
          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

推薦使用集成好的一個腳手架，https://github.com/cloud-temp...。 里面集成了：
1，阿里的 flexble.js ，動態(tài)根據(jù)設(shè)備的dpr計(jì)算根節(jié)點(diǎn)的 font-size
2，引入的 postcss-pxtorem，解決了 px 自動轉(zhuǎn)換 rem 的問題

看這個

這個和vue關(guān)系應(yīng)該不大吧。。。
1.如果沒有用第三方UI組件庫，可以在頁面直接引入你要動態(tài)調(diào)整font-size的js。比如阿里的flexble.js
2.如果用了第三方UI組件庫，比如vux，mint，可以在官方github上issue區(qū)里搜索rem 肯定會有相應(yīng)的方案。