Less for 循环

2019-11-07  本文已影响0人  holidayPenguin

循环设定body和html的字体大小,让移动端可根据rem进行适配。


@defaultRemValue: 32px;

@defaultWidth: 750px;

.LoopScreenArray(@n, @i: 1, @argu) when (@i <= @n) {

  @value: extract(@argu, @i);

  @media only screen and (min-width: unit(@value, px)){
    html, body{
      font-size: unit(@value / @defaultWidth * @defaultRemValue, px) !important; /* no */
    }
  }

  .LoopScreenArray(@n, @i+1, @argu);
}

// 屏幕适配
.LoopScreen(@a, @b, @c, @d, @e, @f, @g, @h, @i, @j, @k, @l, @m, @n, @o, @p, @q, @r){
  .LoopScreenArray(length(@arguments), 1, @arguments);
}


.LoopScreen(240px, 320px, 360px, 375px, 414px, 480px, 540px, 600px, 640px, 667px, 720px, 750px, 768px, 800px, 834px, 1024px, 1080px, 1440px);
上一篇 下一篇

猜你喜欢

热点阅读