写在前面
我们知道,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的值。