移动端适配

    现在市场上有两种适配方案,分别是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.导入加载地址模块

<
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值