美文网首页
sass和less,关于自定义rem函数的不同写法

sass和less,关于自定义rem函数的不同写法

作者: Piemon_Jay | 来源:发表于2021-08-20 11:19 被阅读0次

    需求:在项目的一部分页面内引入响应布局,所以弃用了全局配置px自动转rem

    1、设置html根元素为37.5px

    this.$nextTick(function() {
         document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    })
    

    2-1、sass

    定义:

    @function px2rem($px, $base-font-size: 75px) {
        @return ($px / $base-font-size) * 1rem;
      }
    

    使用:

    width: px2rem(600px);  //  设计稿的300px。
    

    2-2、lesss

    定义:

    //定义一个变量和一个mixin
      @baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
      .px2rem(@name, @px){
        @{name}: @px / @baseFontSize * 1rem;
      }
    

    使用:

    .wrap{
        .px2rem(width,600); //  设计稿的300px。
      }
    

    相关文章

      网友评论

          本文标题:sass和less,关于自定义rem函数的不同写法

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