Wondering what’s next for npm?Check out our public roadmap! »

    postcss-px2rpx-transform

    1.0.2 • Public • Published

    Actions Release

    postcss-px2rpx-transform

    PostCSS 单位转换插件,目前已支持小程序端(px 转rpx),H5 端(px 转 rem)及 RN 端。

    基于 postcss-pxtransform

    Install

    $ npm install postcss-px2rpx-transform --save-dev

    Usage

    postcss.config.js
     
    module.exports = {
      parser: require("postcss-comment"),
      plugins: [
        require("postcss-px2rpx-transform")({
          platform: "weapp",
          designWidth: 375
        }),
      ]
    };
     

    小程序

    options = {
        platform: 'weapp',
        designWidth: 750,
    }

    H5

    options = {
        platform: 'h5',
        designWidth: 750,
    }

    RN

    options = {
        platform: 'rn',
        designWidth: 750,
    }

    输入/输出

    默认配置下,所有的 px 都会被转换。

    /* input */
    h1 {
        margin: 0 0 20px;
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: 1px;
    }
     
    /* weapp output */
    h1 {
        margin: 0 0 20rpx;
        font-size: 32rpx;
        line-height: 1.2;
        letter-spacing: 1rpx;
    }
     
    /* h5 output */
    h1 {
        margin: 0 0 0.5rem;
        font-size: 1rem;
        line-height: 1.2;
        letter-spacing: 0.025rem;
    }
     
    /* rn output */
    h1 {
        margin: 0 0 10px;
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: 0.5px;
    }
     

    Install

    npm i postcss-px2rpx-transform

    DownloadsWeekly Downloads

    8

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    22.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar