vant vue 屏幕自适应

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

 

posted @ 2020-07-27 17:03  张艳涛&java  阅读(2667)  评论(0)    收藏  举报