less+rem迭代適配

如下是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代碼：

@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;
  }
}
複製代碼

效果如圖所示，生成了這些設備的全部媒體查詢代碼。