移动端的rem适配方法---vue中的用法

1.创建一个scss文件

//a.scss文件
@function px2rem($px) {
  $rem: 37.5px;//苹果6的设计稿
  @return ($px / $rem) + rem;
}

2.在vue中配置全局的sass

在vue.config.js文件中加入下面代码就可以scss文件里面的方法全局引用

module.exports = {
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                // 所以这里假设你有 `src/variables.scss` 这个文件
                prependData: `@import '~@/style/reset.scss';` //新版本
                // 旧版本  data: `
                //   @import '@/style/reset.scss';

                //   `
            }
        },
    }

}

3.在.vue文件中引用

px2rem(40px)中的参数就是设计稿的尺寸

.header {
  height: px2rem(40px);
  width: 100%;
  background:$df;
  // background: red;
  padding-left: px2rem(23px);
  box-sizing: border-box;
  .header-content{
    height: px2rem(40px);
  width: 100%;
  }
  .header-item {
    color: #ffcdce;
    font-size: px2rem(16px);
    margin-right: px2rem(20px);
    float: left;
    line-height: px2rem(40px);
    &:nth-child(2) {
      color: #fff;
      font-size: px2rem(17px);
    }
  }
}

例子可以参考https://github.com/litingche1/vue-rem