vant 配合vue 做移動端的自動適配(amfe-flexible & postcss-pxtorem)

 環境vue-cli3 , "vant": "^2.12.2","vue": "^2.6.11"

Vant 中的樣式默認使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具：

postcss-pxtorem 是一款 postcss 插件，用於將單位轉化為 rem
lib-flexible 用於設置 rem 基准值

 

1.下載npm依賴

npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible

 

2.在根目錄修改postcss.config.js文件配置（如果沒有自己需要在根目錄下新建postcss.config.js）

 

轉換vant，設置rootValue:37.5

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'],
        },
        // px轉換成rem
        'postcss-pxtorem': {
            // vant-UI的官方根字體大小是37.5
            rootValue: 37.5,
            propList: ['*'],
        },
    },
};

 

 

不轉換vant

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'],
        },
        // px轉換成rem
        'postcss-pxtorem': {
            // 設計圖頁面尺寸如果是750就填75,是640就填入64
            rootValue: 75,
            propList: ['*'],
            // vant不轉化 vant-UI的官方根字體大小是37.5
            selectorBlackList:['van']  
        },
    },
};

 

 

3.在main.js引入需要計算rem的libflexible文件

  import "amfe-flexible";

 

4.重啟服務

 

5.布局按照設計圖px布局 然后就會自動計算rem的值

.test-box {
  width: 375px; // 會自動轉化為10rem 鋪滿整個屏幕
  height: 500px;
  font-size: 32px;
  background: red;
}