uniapp如何使用rem

Uniapp可以通过以下两种方式使用rem：

使用postcss-pxtorem插件

Uniapp支持使用postcss-pxtorem插件将px转换为rem。具体操作如下：

安装插件

npm install postcss-pxtorem --save-dev

在项目根目录下创建postcss.config.js文件

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      "rootValue": 75, // 设计稿宽度 / 10
      "propList": ["*"]
    }
  }
}

在App.vue中引入postcss.config.js

<style lang="scss">
  @import "@/assets/style/common.scss";
</style>

在common.scss中编写样式

// 根据设计稿适配 rem
$baseFontSize: 0.01rem;
$designWidth: 750px;
@function px2rem($px) {
  @return $px * $baseFontSize;
}
html {
  font-size: $designWidth / 10;
}

使用vw

Uniapp支持使用vw单位进行适配。具体操作如下：

在App.vue中引入样式文件

<style lang="scss">
  @import "@/assets/style/common.scss";
</style>

在common.scss中编写样式

// 根据设备宽度适配
$viewportWidth: 750;
@function vw($val) {
  @return ($val / $viewportWidth) * 100vw;
}

在需要适配的样式中使用vw

.example {
  width: vw(100);
}