一般呢现在主要是:vw,vh,%来实现响应式的单位换算。
而rem需要通过 html的 font-size计算得到。通过一个基准值:iphone6的尺寸页面375像素。实际的像素为750px。2倍图布局。
根目录下面的文件,如果有修改则一定要重启项目
npm i -D postcss-pxtorem@5 注意版本,vue自带的支持是5版本
npm i -S amfe-flexible 阿里出一个类库,解决html中的font-size基准值
// main.js中引入
import 'amfe-flexible'
// 建立一个postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {// 需要安装 npm i -D postcss-pxtorem@5
rootValue: 37.5,// html中的font-size以多少为基准
// vant组件库,它就是以2倍图来布局,所以这里写37.5
propList: ['*'],
// 把所有写在.css或.scss文件中的px转为rem,内联样式中的px不会转
},
},
};