Vue项目移动端的rem适配方法

此文为我个人记录笔记，日后方便学习参考。

1. rem

使用rem单位可以让设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。rem单位基于html元素字体大小，

2. 适配工具

lib-flexible

postcss-px2rem-exclude

3. lib-flexible

安装 lib-flexible：

npm install lib-flexible --save

入口 main.ts 文件中引入 lib-flexible：

import 'lib-flexible'

到此，我们已经算是完成移动端适配了；

我们先来看看 lib-flexible 源码里做了什么骚操作；

是不是恍然大悟，原来源码里会设置html的font-size为屏幕宽度除以10，也就是说1rem等于html根节点的font-size；

举个例子：一般我们的设计稿宽度（iPhone6）是 750px，此时 1rem 就相当于 75px；

这个时候你是不是就觉得可以了已经完美了，但是到你开发时你就会发现一个非常麻烦的点，设计稿给到我们的是px单位，但是我们在开发还要自己计算一下rem，又开始懵了。。。不过好在此时我们可以通过postcss-px2rem-exclude自动将 css 中的px转成rem。

4. postcss-px2rem-exclude

安装 postcss-px2rem-exclude：

npm install postcss-px2rem-exclude --save

配置 postcss.config.js 文件如下:

配置里需要注意remUnit:75这配置；这个是和lib-flexible设置html的font-size为屏幕宽度除以10要保持一致，不然会出现错乱，这里同样以宽度 750px 设计稿为标准设置的，不同的设计稿宽度对应不同的单位值。

完成以上步骤后，我们在开发时只需要将设计稿样式拷贝过来，就会自动转成rem适配。

注意：

1. 不需要进行转换rem的，在样式后面写上注释/*no*/
2. 只能转换style中的css样式，不能转换 script 标签和元素里面 css 样式

以上只是我在 Vue 项目中用到的移动端 rem 适配方法，仅供参考。

以上关于Vue项目移动端的rem适配方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。