Vue项目中封装一个sass的计算方法全局使用,设置自适应字体大小和布局

web端项目根据显示器做适配一般都是rem,

1rem=网页根节点字体大小,但是往往设计图给的尺寸都是px,pt,直接用sass封装一个方法,直接输入px值转rem,

先看看使用的情况

<style lang="scss" scoped>
.parameter-configuration {
  padding: rem(10);
  position: relative;
  height: 100%;
  .btns {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    .lefgt {
      margin-left: rem(20);
    }
  }
}
</style>

废话不多说直接上代码

首先是新建一个scss文件.里面写上我们的计算方法

$remRate: 16;
@function rem($r) {
    @return $r / $remRate * 1rem;
}

 然后是在vue.config.js里面配置一下,这样就可以全局使用这个方法了

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'./',
  css:{
    loaderOptions:{
      scss:{
        additionalData:
        '@import "./src/style/rem.scss";'
      }
    }
  },
  devServer: {
    }
})

当然还有个简单的办法 就是给html的font-size设置为100px然后再使用rem的时候 就非常好计算了,不用写方法了

好了到此结束,前端菜鸟,记录遇到的问题和解决办法,各位大佬就当看个乐呵