阿里手淘可伸缩布局方案amfe-flexible解决vue移动端适配问题

本文介绍了如何在Vue项目中采用amfe-flexible处理移动端适配问题,包括安装、引入、配置meta标签和px2rem-loader,旨在解决不同设备的浏览器兼容性,以实现基于750px设计稿的rem自动转换。
摘要由CSDN通过智能技术生成

前言:

由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方案。vw的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。

1.首先把安装amfe-flexible,这里使用npm install

npm  install -S amfe-flexible

2.在入口文件min.js中引入

import 'amfe-flexible/index.js'

3.在根目录的index.html 的头部加入手机端适配的meta代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4.安装px2rem-loader,这里使用npm install
作用&#

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值