美文网首页
Less for 循环

Less for 循环

作者: holidayPenguin | 来源:发表于2019-11-07 14:56 被阅读0次

循环设定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);

相关文章

  • Less 循环

    本节我们学习 Less 中的循环 (Loop),循环在编程语言中应该是很常见的,一般编程语言中都有循环,例如在 J...

  • Less for 循环

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

  • web前端入门到实战:css,less实现星空动画

    效果动图如下: 知识点预览 这篇文章的less技巧 + css技巧知识点包括: less如何写循环 less里如何...

  • less-循环(loop)

  • (二)Less函数

    Less提升 条件表达式 循环 合并属性 一共有5种 >,>=,<,<=,true类型检查函数 , iscolor...

  • web前端学习线路图2

    十二、LESS教程 Less教程Less 安装Less 嵌套规则Less 操作Less 转义Less 函数 Les...

  • 记一次less循环

    准备构建项目的CSS框架,使用LESS来作为预编译器。 在写栅格布局时,参考ant-design的24栏布局,需要...

  • less 编写函数与循环调用

  • Less

    Less 同类型:Sass 、styuls 一款比较流行的预处理CSS,支持变量、混合、函数、嵌套、循环等特点官网...

  • Vue项目使用less

    1 先下载less less-loader: npm i less less-loader -S 2 将less配...

网友评论

      本文标题:Less for 循环

      本文链接:https://www.haomeiwen.com/subject/ihlvbctx.html