less学习之less+rem迭代适配

• index.less代码 

  // 变量
  // 适配主流设备
  @adapterDeviceList:320px,360px,375px,384px,400px,414px,424px,480px,540px,640px,720px,750px;
  // 设备的种类
  @len:length(@adapterDeviceList);
  // 预设基准值
  @baseFontSize:100px;
  // 设计稿尺寸
  @psdWidth:750px;
  
  // 混入
  // less中的index是从1开始的，比起索引，应该叫做序号
  .adapterMixin(@index:1) when (@index<=@len){
      @media (min-width: extract(@adapterDeviceList,@index)) {
          html{
              font-size: @baseFontSize/@psdWidth*extract(@adapterDeviceList,@index);
          }
      }
      .adapterMixin(@index+1);
  }
  
  // 适配
  .adapterMixin();

使用less迭代语法，对主流的每一个设备尺寸设置媒体查询，从而实现适配。如果有设备可以添加到@adapterDeviceList这个数组中，方便后期更好地维护。

以下是less生成的css代码：

• index.css代码

  @media (min-width: 320px) {
    html {
      font-size: 42.66666667px;
    }
  }
  @media (min-width: 360px) {
    html {
      font-size: 48px;
    }
  }
  @media (min-width: 375px) {
    html {
      font-size: 50px;
    }
  }
  @media (min-width: 384px) {
    html {
      font-size: 51.2px;
    }
  }
  @media (min-width: 400px) {
    html {
      font-size: 53.33333333px;
    }
  }
  @media (min-width: 414px) {
    html {
      font-size: 55.2px;
    }
  }
  @media (min-width: 424px) {
    html {
      font-size: 56.53333333px;
    }
  }
  @media (min-width: 480px) {
    html {
      font-size: 64px;
    }
  }
  @media (min-width: 540px) {
    html {
      font-size: 72px;
    }
  }
  @media (min-width: 640px) {
    html {
      font-size: 85.33333333px;
    }
  }
  @media (min-width: 720px) {
    html {
      font-size: 96px;
    }
  }
  @media (min-width: 750px) {
    html {
      font-size: 100px;
    }
  }

效果如图所示，生成了这些设备的所有媒体查询代码。

• 示例