vue 中使用rem佈局

在使用vue-cli搭建好項目框架後,在目錄結構的index.html文件中添加一段js代碼:

而後在寫css就能夠將px單位換成rem.
這裏設置的比例是100px=1rem,
例如:寬度爲100px時,能夠直接寫成1rem

=============================================================
2==vue cli3.0 rem 使用fnResize();
window.onresize = function () {
  fnResize();
}
function fnResize() {
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
  if (deviceWidth >= 750) {
    deviceWidth = 750;
  }
  if (deviceWidth <= 320) {
    deviceWidth = 320;
  }
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px';
}

vue cli3.0 rem 使用
首先安裝amfe-flexible插件，在main.js裏引入

一、npm i amfe-flexible

二、import 'amfe-flexible'

而後再，安裝postcss-px2rem插件

npm i postcss-px2rem

在package.json中配置

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem": {
        "remUnit": 37.5
      }
    }
  }

說明，我這裏用的是vue-cli3.0腳手架。在.vue文件裏。樣式直接寫px單位就能夠了。在瀏覽器查看時會自動轉換爲rem單位。若是字體還想用px。那就這樣將px大寫。就不會編譯爲rem單位了。樣式就能夠實現px。