1. 前提 @vue/cli-service": "~4.5.0" "vue": "^2.6.11", "vant": "^2.10.2",
1.安装： 不安装lib-flexible 官网说已经停止更新建议安装amfe-flexible
npm i -S amfe-flexible
安装成功后 "amfe-flexible": "^2.2.1" 此插件是根据设备更改根节点 fontsize大小
2. html head 中添加
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
3. main.js 中添加
import ‘amfe-flexible‘;
安装成功后运行就可看出根节点像素更改了
4. 安装postcss-pxtorem
npm install postcss-pxtorem@5.0.0 -D (亲测OK)
npm install postcss-pxtorem --save-dev (此命令安装版本报错
Error: PostCSS plugin postcss-pxtorem requires PostCSS 8)
5.根目录
vue.config.js文件，添加如下配置：
css: { loaderOptions: { css: {}, postcss: { plugins: [ require("postcss-pxtorem")({ // 把px单位换算成rem单位 rootValue: 37.5, // 换算的基数(设计图750的根字体为75 vant框架基于37.5设计的) selectorBlackList: [‘van‘], // 忽略转换 - 正则匹配项 propList: ["*"], }), ] } } }
注意 *** 此插件 postcss-pxtorem 不能转换行内样式,只转换外部文件和.vue文件下方style里面的内容
将小写px 写成大写 Px 或者PX 即不进行转换
如:
<style scoped lang="scss"> .home_page { width: 100%; 标题颜色 /deep/ .van-ellipsis { color: red; } /deep/ .van-nav-bar .van-icon { color: red; } /deep/ .van-nav-bar__text { color: red; } /deep/.van-nav-bar__title{ color: blue; } .answer_content{ width: 355px; text-align: center; height: 60px; line-height: 60px; margin: 20px 10px; border:1Px solid red; //此像素不转换 } }