px2unit

px2unit

中文版本

convert px to other unit，like vw、rem...

Support Languages

• html
• vue
• css
• less
• scss
• sass
• stylus
• tpl(php smarty3)
• tsx
• jsx

Configurations

💡 All fields must be prefixed with px2unit. in settings

px2unit.transformRules

this field is an array with the follow object

interface TransformRules {
  title?: string;
  sourceWidth: number;
  destinationWidth: number;
  unit: string;
}

the transform rule is simple, if you print 1px, it will auto show the convert value(${1 * destinationWidth/sourceWidth}${unit})

for example, if you use Viewport Width(vw) and your design width is 375px，you can use the follow Configurations

{
  "px2unit": {
    "transformRules": [
      {
        "sourceWidth": 375,
        "destinationWidth": 100,
        "unit": "vw"
      }
    ]
  }
}

and it will auto convert what you want

default transformRules

[
  {
    sourceWidth: 375,
    destinationWidth: 10,
    unit: 'rem'
  },
  {
    sourceWidth: 375,
    destinationWidth: 100,
    unit: 'vw'
  },
  {
    sourceWidth: 375,
    destinationWidth: 750,
    unit: 'rpx'
  }
]

Thanks

• vscode-cssrem