现在市场上有两种适配方案,分别是flexible适配和vw适配。flexible适配已经渐渐被抛弃了(官方建议不要再使用),以后都是通过vw来进行适配。但是还是有些项目中是在用flexible来做适配的。下面先说flexible适配,rem是相对于ui结构中的font-size来决定的。
flexible适配实现如下:
1.安装amfe-flexible插件
yarn add amfe-flexible
//或者
npm i amfe-flexible
2.在main.js中导入
import "amfe-flexible"
3.安装postcss-pxtorem
注意:这个插件最新版本有兼容性问题,需要下载以前版本,本人使用5.0.0版本
npm i postcss-pxtorem
//或者
yarn add postcss-pxtorem
4.配置
一般我们移动端项目都是搭配着vant组件库使用的,并且vant组件库中的设计稿是375px,但是我们自己的设计稿都是相对于vant组件库中偏大的(如果一样大就可以不用这么配置)。因此我们需要针对两套设计稿做适配。我们以我们自己设计稿为750为例 ,下面我们来说配置步骤
1.导入加载地址模块
<