在w3c中是这样描述rem中,rem是相对与根元素做计算,我们在移动端使用rem作为所有大小的单位来解决适配的问题。
如何配置flexible.js + rem 布局(vue项目),来解决适配的问题,话不多说,直接上菜。
安装lib-flexible.js
npm install lib-flexible --save
在项目入口文件main.js中引入lib-flexible
import 'lib-flexible'
px自动转换rem
使用 webpack 的 px2rem-loader,自动将px转换为rem
安装px2rem-loader
npm install px2rem-loader --save-dev
配置px2rem-loader
首先找到 build/utils.js文件,在utils.js中添加如下配置
remUnit值是根据设计稿定的,淘宝的Flexible.js将屏幕分成10份,设计稿是375 x 667,所以每1rem就等于37.5
然后找到generateLoaders方法,在函数里如下配置 :px2remLoader
这里最重要的就是要在上图两个位置都要加上px2remLoader,不然不会起作用!!!
注释mate标签
注释index.html中的mate标签
这样配置flexible.js + rem 布局就完成了,代码中px在编译后自动变成rem。
安装px2rem后,再使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。
- 直接写px,编译后会直接转化成rem —- 除开下面两种情况,其他长度用这个
- 在px后面添加/no/,不会转化px,会原样输出。 — 一般border需用这个
- 在px后面添加/px/,会根据dpr的不同,生成三套代码。—- 一般字体需用这个
描述如有错误,欢迎指正!