vant vue 螢幕自適應
阿新 • • 發佈：2020-07-27
手機端 pc端 螢幕自適應
一、新建vue.config.js專案目錄中沒有 vue.config.js 檔案，需要手動建立,在根目錄中建立vue.config.js
const pxtorem = require('postcss-pxtorem') module.exports = { css: { loaderOptions: { postcss: { plugins: [ pxtorem({ rootValue: 37.5, propList: ['*'], // 該項僅在使用 Circle 元件時需要 // 原因參見 https://github.com/youzan/vant/issues/1948 selectorBlackList: ['van-circle__layer'] }) ] } } } }
二、安裝lib-flexible
npm install amfe-flexible -s
三、main.js引入
import 'amfe-flexible'
四、index.html要設定meta
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Project Management System</title>
</head>
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
</body>
</html>
五、關於
關於使用 為了要使用vant的樣式，rootValue應設定為37.5 設計圖是750px寬的，則寫的時候如果用px 則需要除以2，如果用rem的話，要自行計算 px/75=rem，或者使用IDE的外掛計算
atzhang