手機端 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