px2rem插件

因為設計師每次給的都是px的圖，這里要自己計算轉換rem很頭疼，所以這里使用插件進行px與rem的轉換

rem的響應式設計

這里是我一個全局的js文件，根據設備的寬度和設計稿來動態(tài)的另一rem的大小，因此在項目中直接按照設計稿計算出對應的rem來寫，設備就能自動適配

/* eslint-disable */
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// 這里在375的設備上1rem = 20px，在其他屏幕寬的時候會自動根據這個比例來動態(tài)調整

第一款： px2rem

這款插件是集成到項目中的，如果你的項目是使用vue-cli自動構建工具構件的，建議參考如下配置

1. 安裝

npm install px2rem-loader

2. 配置
   webpack.base.conf.js > 在module> rules 下添加

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
}

3.找到utils.js這個文件 在cssloader 后面加入

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 40 // 40px = 1rem
            remPrecision: 8 // rem的小數點后位數
    }
  }
再然后把這行替換成
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
這個
  const loaders = [cssLoader, px2remLoader];

注意： 這里的流程中有兩次轉換第一次 css中的px轉換為px2rem的rem，這里是 40px = 1rem，第二步是rem適配到頁面 ，這里的rem與像素比是根據屏幕寬度動態(tài)計算的，以375的設備為例是 1rem = 20px轉換到頁面中顯示.這樣最終實現 輸入 40px，屏幕上20px的效果，因為我UI標注是按照2倍圖來的，所以直接按照標注寫就自己轉換了。

4.重啟項目就可以了

cssrem 插件

這個是vscode ide 的一款插件，主要實現了在書寫代碼的時候直接將px轉成rem

1. vscode安裝插件
   2.配置

參數配置文件：VSCode -> 文件 -> 設置 -> 搜索cssrem

cssrem.rootFontSize root font-size (unit: px), default: 16
cssrem.fixedDigits px轉rem小數點最大長度，默認：6。
cssrem.autoRemovePrefixZero 自動移除0開頭的前綴，默認：true

3.書寫的時候就會有提示 ，可以直接轉換rem