postcss-px2vw-pv

Doc ZH-CN 🇨🇳

PostCSS plugin which transfer px to vw when use pv unit directly.

• if like this, could you please ⭐️star⭐ on github

Install

    npm i postcss-px2vm-pv -D

    yarn add postcss-px2vw-pv --dev

Options

Fast use

• first to add the plugin to postcss.

    module.exports = {
        plugins: [
            require('postcss-px2vw-pv')
        ]
    }

• then set the options of your design draft or use default.
• when the width/height of a div is '500px', then use '500pv' to replace it.

Samples

• with a design draft of 750

    @keyframes ani {
        from {
            transform: translateY(-20pv);
        }
        to {
            transform: translateY(20pv);
        }
    }
    .box {
        width: 500pv;
        height: 500pv;
        transform: translateX(10pv);
    }

• the sample above transferred to:

    @keyframes ani {
        from {
            transform: translateY(-2.6667vw);
        }
        to {
            transform: translateY(2.6667vw);
        }
    }
    .box {
        width: 66.6667vw;
        height: 66.6667vw;
        transform: translateX(1.3333vw);
    }