手机端vue+vant+rem项目适配750px设计稿的配置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机端vue+vant+rem项目适配750px设计稿的配置相关的知识，希望对你有一定的参考价值。
参考技术A 手机端页面开发，使用vue，UI框架用vant，设计稿是750px，单位用remvant是按照375px设计稿开发，为单位的，如果配置根字体大小为37.5，设计稿就无法还原，配置75，vant组件就变小了。
很是苦恼，经过一番搜索，按照如下配置.postcssrc.js文件，就可以完美解决问题
module.exports = ( file ) =>
let isVant = file && file.dirname && file.dirname.indexOf("vant") > -1;
let rootValue = isVant ? 37.5 : 75; // 判断条件 请自行调整
return
plugins:
autoprefixer:
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
,
"postcss-pxtorem":
rootValue: rootValue, //结果为：设计稿元素尺寸/75，设计稿宽 750,最终页面会换算成 10rem
unitPrecision: 5, //保留小数位
propList: ["*"],
//https://github.com/youzan/vant/issues/1181#issuecomment-487305533
//selectorBlackList: ["van-"], //（数组）要忽略的选择器并保留为px。 过滤的类名
minPixelValue: 2 // （数字）设置要替换的最小像素值 解决 1px 问题 //所有小于设置的样式都不被转换
参考 //https://www.jianshu.com/p/20dad3f93216
移动端适配-px转成rem
参考技术A rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小rem方案的原理其实就是，将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间。1rem等于此页面html的font-size，rem可以理解为每份是多少px
比如，设计稿宽度为375px，将页面划分成10份，那么1rem=37.5px，如果有一个div宽度为37.5px，换算成rem为1rem。将375px宽的屏幕划分为10份，这个div宽度占一份。
即 document.body.clientWidth / 10
同理，如果我们想让1rem=10px，那么document.body.clientWidth / 37.5即可
npm install amfe-flexible
import 'amfe-flexible'
此时默认，1rem = 16px，可以看到Elements中 <html lang="en" style="font-size: 16px;">
在现在的htmlUI设计图中，右上角可选择切换单位，切换到 CSS Rem 16px，即可得到对应的rem标注，不需要手动换算
（若想更改rem和px的换算比例，参考第三步）
此时 1rem = 10px，可以看到Elements中 <html lang="en" style="font-size: 10px;">
以上是关于手机端vue+vant+rem项目适配750px设计稿的配置的主要内容，如果未能解决你的问题，请参考以下文章