Skip to content

Latest commit

 

History

History
112 lines (82 loc) · 2.61 KB

README.zh-hans.md

File metadata and controls

112 lines (82 loc) · 2.61 KB
Raw

PostCSS Rpx Loader Build Status

PostCSS插件，可以让你在样式中使用响应式长度单位rpx，用法同微信小程序

可以取代rem和flexible.js等解决方案

优点

照搬标注图

可以直接将UI标注图上的px值照搬到CSS（或SCSS等）中，插件会自动完成转换，无需手动换算为rem等单位

提高客户端性能

单位转换由PostCSS处理，无需在客户端引入任何JS库，从而提高性能

与组件库无冲突

不依赖<html data-dpr="">，引入第三方组件库后，不会导致其变大或变小

不覆盖原生单位

rpx是新增单位，不覆盖CSS原有单位如rem、em和px等，原有单位依然可以正常使用

VW本质

由于本质上是vw，所以能够解决真实1px、视网膜屏幕等问题

使用方法（以SCSS为例）

首先确保安装了postcss-loader以及你所需的预处理器的PostCSS插件，如postcss-scss

在项目根目录中，执行npm i postcss-rpx-loader -D以安装本插件

在webpack.config.js中, 声明postcss-loader

module.exports = {
  module: {
    rules: [{
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'postcss-loader', // 如果用了预处理器，将`postcss-loader`插入到预处理器的loader之前
      'sass-loader'
    ]
    }]
  }
}

在项目根目录下新建postcss.config.js，内容如下

module.exports = {
  syntax: 'postcss-scss',
  plugins: [
    // 默认UI图宽度为750px
    require('postcss-rpx-loader')
    // 可以接受一个参数，指定UI图宽度
    // require('postcss-rpx-loader')(1080)
  ]
}

接下来就可以在样式文件中使用rpx了

div {
  /* 如果UI标注图上为50px，则只需要写50rpx */
  height: 50rpx;  
}
div {
  /* 编译后结果 */
  /* 在不同宽度的设备上，视觉效果是一致的 */
  height: 6.67vw;
}

与Vue CLI集成

在项目根目录中，执行npm i postcss-rpx-loader -D以安装本插件

在package.json中

{
  "name": "",
  "version": "",
  // 此处省略一万字
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-rpx-loader": {} // 增加本行
    }
  }
}