vue项目使用lib-flexible解决移动端适配问题（方案二）

写在前面

我们知道，rem单位的尺寸是相对于根元素（html）的字体大小font-size的尺寸，用以解决移动端不同终端设备屏幕不一致配置问题。

一、安装依赖

安装 lib-flexible 到项目中，如果未安装 less 和 less-loader，一并安装到项目中。
安装命令：

yarn add lib-flexible less less-loader --save

二、配置

1、在项目的入口文件main.js中引入lib-flexible

import 'lib-flexible';

其实，只要项目中引用了lib-flexible，就可以用lib-flexible来解决移动端适配了。
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。

三、测试

启动项目，在样式中写样式时将px转为rem，如
margin: 1.33333333rem auto;
这样也能解决移动端适配问题。

但是有没有很简便的计算方法呢？
下面提供一种解决方法：
1、新建一个用以把px转为rem的文件px2rem.less，内容如下：

/*********** screen配置 ***********/
@screen: 750; //设计图宽度
@remSize: 75; //1rem对应的px值

.toRem (@self) {
    @rem: @self/@remSize*1rem;
}
//转换为百分比
.toPercentage (@numerato, @denominator) {
    @percentage: @numerato/@denominator*100%;
}
//外边距rem换算
.marginTop(@slef) {
    margin-top: @slef/@remSize*1rem;
}
.marginRight(@slef) {
    margin-right: @slef/@remSize*1rem;
}
...这里可以写很多

2、使用
在样式中引入该文件，如

@import "../px2rem.less";

#jd-layout {
    .marginTop(30);
}

这样就不用用计算器去计算啦，传入的值就是单位为px的值。