less中的循环

男娘i 2021-12-13 13:41 254阅读 0赞

在less中使用媒体查询做rem布局，刚开始是这样写的

.Mixin(){
      @media(min-width: 720px){
        html{
          font-size: 720px/750px*100px;
        }
      }
      @media(min-width: 750px){
        html{
          font-size: 750px/750px*100px;
        }
      }

通常我们需要适配的尺寸肯定不会是两三个，过多的话一个个去写很麻烦，这时候需要遍历数组 但是less没有for循环的语法, 不过他有类似的循环  
首先要定义索引index, 循环的条件是当index < 数组的长度 , 迭代条件 index++

//当前主流的设备尺寸
    @deviceList: 750px ,720px, 640px, 540px,480px, 424px, 414px, 400px, 384px, 375px, 320px;
    
    //设计稿的尺寸
    @psdWidth: 750px;
    
    //预设的基准值
    @baseFontSize: 100px;
    
    //设置数组的长度
    @len:length(@deviceList);

遍历

.Mixin(@index) when (@index > 0){
      // 根据index获取对应的某个值 extract(数组名, 对应的序号)
      @media(min-width: extract(@deviceList, @index)){
        html{
          font-size: extract(@deviceList, @index)/@psdWidth*@baseFontSize;
        }
      }
      .Mixin(@index - 1);
    }

调用

.Mixin(@len);

转化的结果

@media (min-width: 320px) {
      html {
        font-size: 42.66666667px;
      }
    }
    @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;
      }
    }