vue-cli 3.0移动端项目：flexible、px2rem解决移动端适配，并且连带解决第三方ui库变小...

最新推荐文章于 2022-11-08 16:39:18 发布

weixin_30467087

最新推荐文章于 2022-11-08 16:39:18 发布

阅读量348

点赞数

文章标签： ui javascript webpack ViewUI

原文链接：http://www.cnblogs.com/moxTY/p/10670649.html

版权

　　首先我们需要知道，flexible的实质是根据不同尺寸动态改变缩放比，动态改变html的style.fontSize，也就是rem布局，感兴趣的可了解如何实现1px物理像素。

(flexible由手淘团队开发，简直解决了rem适配的噩梦，如下是手淘rem需要适配的机型)

进入正题：

1、第一

　　引入lib-flexible .

　　安装lib-flexible：　　npm i lib-flexible --save

　　在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'

2、第二

　　使用postcss-px2rem自动将css中的px转换成rem（真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊）

　　安装postcss-px2rem ：　　npm install postcss-px2rem --save-dev

3、配置postcss

4、重启项目发现，px已经在浏览器转换为rem，但是问题没有完全结束：
把px转换成rem的配置完成后，还需要在入口文件（main.js）里面配置一段代码，此代码的目的是监听window窗口大小的变化
从而动态改变html根节点的font-size的大小。
达到适配不同设备的效果；

5、最后，我们需要知道flexible的转换不包括第三方ui库，具体去官网看下：网上有许多解决办法，首先我们要知道，根源是因为移动端ui库，本来就是适配了移动端尺寸，而fliexble再去适配一次，能不变小吗？

那么就知道解决办法了，总结大致如下：

　　1、固定缩放比，即dpr为1，不推荐，全局设置不易调控；

　　2、给不希望转化rem的组件，设置px的时候，单位后面加上／* *／即忽略该px

　　3、在它转化之前就设置rem，个人推荐该法，利用VScode的px to rem，将写好的px，直接选中option+z转为rem，然后fliexble就在webpack编译的时候不去转化它了。

至此，结束。

转载于:https://www.cnblogs.com/moxTY/p/10670649.html

关注