npm i -S amfe-flexible
在main.js文件中引入lib-flexible
import 'amfe-flexible'
安装postcss-pxtorem
npm i -D postcss-pxtorem@5.1.1
之所以需要这个版本，是为了避免升级postcss8.x报错
在public/index.html加入meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
vue.config.js里加入配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
}
}
},
}
这样，375社交稿，可以直接使用
npm i -S amfe-flexible 在main.js文件中引入lib-flexibleimport 'a...
vue-cli 3.0+vant项目使用postcss-pxtorem和amfe-flexible 进行移动端适配...
如果是做 PC 端的网页，无需做 rem 适配，但是做 H5 开发，rem 是需要做一下的，Vant 官方也为我们...
移动端弹窗提示信息语法 移动端ui框架是vant，语法参照官网 参考文档地址：https://vant-contr...
我是在两年前做vue+vant移动端适配的时候用的这个方案lib-flexible + px2rem-loader...
移动端常用UI组件库 1.vant[https://vant-ui.github.io/vant/#/zh-CN]...
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具： postcss-p...
移动端组件库vant Vant 是一个轻量、可靠的移动端组件库 特点： ? 性能极佳，组件平均体积小于 1KB（m...
1、vant 移动端组件库 https://youzan.github.io/vant/#/zh-CN/2、Coo...
移动端适配
本文标题：vant移动端适配
本文链接：https://www.haomeiwen.com/subject/ywiqsltx.html
网友评论