使用less的适配方案

rem布局原理
通过html上的字体大小控制页面上所有rem单位尺寸。
换算：预设一个基准值100px 基于640px设计尺寸 当适配320px的设备时的基准值：320/640100=50px
公式：当前设备的宽度/设计稿的宽度预设的基准值。

通过以上可编写一个适配方案，实现布局中元素的宽度大小随着页面大小等比列缩放。

①index.less文件中代码，主要导入less文件

@import "var";//存变量
@import "Mixin";//存函数
@import "adapter";//调用函数

②var.less文件中代码，用来存变量

//定义变量：设备尺寸,定义数组存放设备尺寸
@DeviceList:750px,720px,640px,540px,480px,424px,414px,411px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//基准值
@baseFontSize:100px;
//数组长度
@len:length(@DeviceList);

③Mixin.less文件中代码，用来存函数

//less中没有for循环  但有类似的
//less中的index从1开始，是序号
.mixin(@index) when (@index > 0) {
  //less需要用extract（要遍历的数组，对应的序号） 改方法获取当前序号对应的数据
  @media (min-width: extract(@DeviceList,@index)) {
    html {
      font-size: extract(@DeviceList,@index)/@psdWidth*@baseFontSize;
    }
  }
  //递归，-1前必须要空格，不然会被解析为拼接
  .mixin(@index - 1);
}

④adapter.less文件中代码，用来调用函数

.mixin(@len);