移動端的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