阅读 259

vue - cli3.x - 使用 postcss-px2rem 自动将 css 的px单位转换为 rem 单位 - postcss.config.js 配置

开发移动端的时候,经常需要自己手动去将 px 单位计算成 rem 单位,这很消耗时间。我们可以使用 postcss-px2rem 插件来实现将 px 自动转换为rem,这样就省去的计算的步骤,加快开发速度。

  1. 安装:执行 npm i postcss-px2rem --save-dev
  2. 配置:postcss.config.js :如下:
module.exports = {
  plugins: {
    "postcss-px2rem": {
      remUnit: 50, // 50px = 1rem
      remPrecision: 2 // rem的小数点后位数
    }
  }
}
复制代码

设计稿是 750px 的,我这里计算后的根元素是按 50px来算(1rem = 50px),如下:

在这里插入图片描述
所以,postcss-px2rem 的配置里,remUnit 填写50。 3.书写:例如 750px 的设计稿里,一个宽度为 750px 的区域应该这样计算:750/2 = 375px。 最后填写 375px ,如下:

<template>
  <div class="addressBlock">
    <div>请选择</div>
  </div>
</template>
<style lang="scss" scoped>
  .addressBlock {
    font-size: 16px;/* 在750px设计稿里大小为 32 px */
    width: 375px; /* 在750px设计稿里尺寸为 750 px */
  }
</style>
复制代码

最后得到的结果如下,自动帮我们转换为rem:

在这里插入图片描述

关注下面的标签,发现更多相似文章
评论