vue cli3 + vant 專案 rem配置流程
阿新 • • 發佈:2020-11-06
1、安裝lib-flexible(用於設定 rem 基準值)
npm i -S amfe-flexible
2、在main.js檔案中引入lib-flexible
import 'amfe-flexible'
3、安裝postcss-pxtorem(postcss-pxtorem是一款 postcss 外掛,用於將單位轉化為 rem)
npm install postcss-pxtorem --save-dev
4、在public/index.html加入meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
5、動態設定rootValue的大小,即對於vant-ui框架的元件 將rootValue設定成37.5,對於我們自己的750寬度的設計稿的將rootValue設定成75。這樣就可以達到所有的均可自適應了。在根目錄postcss.config.js檔案中新增入下內容:
const autoprefixer = require('autoprefixer'); const pxtorem = require('postcss-pxtorem'); module.exports = ({ file }) => { let remUnit if (file && file.dirname && file.dirname.indexOf('vant') > -1) { remUnit= 37.5 } else { remUnit = 75 } return { plugins: [ autoprefixer(), pxtorem({ rootValue: remUnit, propList: ['*'], selectorBlackList: ['van-circle__layer'] }) ] } }