移动端适配rem

rem适配 手动

方法：

1. 设置根元素的大小和屏幕宽度的关系

2. 写样式的时候采用rem为单位

3. 优化我们的计算流程  通过less的mixin优化我们的计算

首先：在public的index文件夹中，在下面的代码中加上

initial-scale=1.0, 初始的缩放比例

minimum-scale=1, 允许用户缩放到的最小比例

maximum-scale=1 允许用户缩放到的最大比例

,user-scaleable=no" 用户是否可以手动缩放

并且写一个script标签里面就行，写一个将根元素字体大小和屏幕进行绑定，在移动端的屏幕大小变的时候，字体相应的也会发生改变

然后再src里面创建一个style文件夹来存放格式并创建四个文件夹

在index.less里面是引入的mixin.less与variable.less文件，当项目用的时候只引入index.less

@import "./mixin.less";
@import "./variable.less";

在mixin.less里面 

.border(@px:1px, @style:solid, @color:red) { //配置页面的boder的。在页面用的话首先会引入index.less,再直接.border()就行
  border: @px @style @color;
}
.width(@px) { //宽高需要设置rem,就用首次的定好的模板图，首次定好的是宽375px,所以1rem就是37.5px,让开始的px直接除以37.5也就是@baseSize，就算出是多少rem了,当你换宽度是700px的时候还是同样的rem,所以宽高占比还是不变
  width: unit((@px/@baseSize), rem); // 给第一个参数添加第二个参数的单位 unit(2,px) = 2px  unit(2,rem)= 2rem
}
.height(@px) {
  height: unit((@px/@baseSize), rem);
}

在variable.less文件夹里面，设置根元素的px,就是首次定好移动端的宽度的宽度的十分之一与颜色

@baseSize: 37.5px;

@skyblue: skyblue;
@red: red;

在用的时候