less使用自定义函数完成简单自适应

参考：Less编写函数(mixin/@functions)的小技巧分享

1、自定义less全局函数
添加自定义函数在全局main.less里，并在main.js里引用main.less

// main.less
.remMixin() {
    
    
    @functions: ~`(function() {
    
     
      var rem = 16;
      // px 转 rem
      this.px2rem = function(size) {
    
    
        return (size / rem) + 'rem';
      };
    })()`;
  }
  .remMixin();

// main.js
import './assets/less/main.less'

2、使用自定义函数

<style scoped lang='less'>
.pageTotal{
    
    
    width: ~`px2rem(44)`;
    font-size:  ~`px2rem(15)`;
}