移动端vue实现样式自适应(结合vant)
发布网友
发布时间：2022-11-23 14:56
共1个回答
热心网友
时间：2023-09-05 09:48
vant本身是px单位的，实际项目设计图是750px宽，若要实现同时自适应，需要结合两个插件：
amfe-flexible和postcss-pxtorem
步骤如下
一、如何将px单位转化为rem？
借助 postcss-pxtorem 插件，postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。
安装：
配置：vue.config.js文件
二、如何做rem适配？
rem适配文档上建议使用 lib-flexible ，flexible适配的原理是物理像素与逻辑像素的相互转化：物理像素px = window.screen.width(逻辑像素pt) * window.devicePixelRatio
如何配合框架使用:
1.安装
2.main.js引入
（index.html要设置meta）
————————————
关于使用
为了要使用vant的样式，rootValue应设置为37.5
设计图是750px宽的，则写的时候如果用px 则需要除以2，如果用rem的话，要自行计算 px/75=rem，或者使用IDE的插件计算
使用蓝湖的话，很方便
另，如果不使用vant，单纯的还原设计图
可以将rootValue设置为75，css像素可以直接按设计图写
参考： https://www.cnblogs.com/changxue/p/11322855.html
方法二（推荐）：vw单位 使用postcss-px-to-viewport （自定义的样式）
安装
npm install postcss-px-to-viewport --save-dev
配置：
使用这个 vant的单位不变 自定义的单位可直接写px 会转化为vw
