vue movable end plug adaptive postcss-px-to-viewport

Usually we do vue movable end projects unit of length is used rem, em, need to be calculated according to the width of the draft design, and this plug can configure properties directly constructed in accordance with the original design draft length, the unit does not require cumbersome conversion.

installation:

npm install postcss-px-to-viewport --save

After the installation is complete, find the ".postcssrc.js" file in the root directory of vue, add the following configuration:

"postcss-px-to-viewport":{
    viewportWidth: 750, // window width corresponding to the width of our design draft, usually 750.
    viewportHeight: 1334, // window height, width 750 is specified according to the device, generally designated 1334.
    unitPrecision: 3, // (specify the number of decimal places `px` converted to Windows unit values ​​(often not divisible). 
    viewportUnit: 'vw', // specify the need to convert the Windows unit, recommended vw. 
    selectorBlackList: [ '.ignore', '.hairlines', 'weui'], // window units do not convert to the specified class, you can customize, you can add unlimited, we recommended to define one or two generic class name.
    minPixelValue: 1, // less than or equal to `1px` not converted to units of Windows, you can also set the value you want. 
    mediaQuery: false // allow conversion `px` in the media query.
 }

tips: selectorBlackList computed style attribute is used to bypass the specified class name, if the item has to be configured using the class name commonly ui ui other components.