VUE PC端适配方案flexible+px2remLoader

利用webpack配置px2rem-loader和lib-flexible來實作px轉化rem

1、安裝

npm install px2rem-loader -D

npm install lib-flexible -S

2.參照官網配置方法

// 增加代碼，px轉rem配置（需要将px2remloader添加進loaders數組中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,  //根據視覺稿，rem為px的十分之一，1920px  192 rem
      // remPrecision: 8//換算的rem保留幾位小數點
    }
  }
           

但是，重新啟動項目比例不對，需要修改代碼。

在main.js中引入檔案

import './utils/flexible.js'
           

檢視flexible代碼，發現

需要将代碼修改為适應PC端的代碼。

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
           

重新開機項目，發現一切運作正常。

對了，需要注意的事，一般不對1px的邊框進行換算，隻需要哎樣式後面添加/no/即可保證不被轉換

.login 
        width: 1920px;
        height: 200px;
        font-size: 32px;
        border: 1px solid red;/*no*/
        background : $color-buttonSure
           

希望對大家有幫助~