# postcss-pxtoremvw

> A webpack loader, it can convert px to rem and vw

Latest version **1.0.0** (published 2018-06-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install postcss-pxtoremvw
pnpm add postcss-pxtoremvw
yarn add postcss-pxtoremvw
bun add postcss-pxtoremvw
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-06-12 |
| First published | 2018-06-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 3.7 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | taxi666 |
| Maintainers | taxi666 |
| Keywords | rem;vw |

## Links

- npm: https://www.npmjs.com/package/postcss-pxtoremvw
- Repository: https://github.com/taxi666/postcss-pxtoremvw
- Homepage: https://github.com/taxi666/postcss-pxtoremvw#readme
- Issues: https://github.com/taxi666/postcss-pxtoremvw/issues
- npm.io page: https://npm.io/package/postcss-pxtoremvw

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^6.0.16

## Recent versions

- 1.0.0 (latest) — 2018-06-12

## README

# postcss-px-to-vw
A plugin for PostCSS that converts pixel units to vw unit.

# postcss-pxconverter

## 目前存在的问题

1. rem 布局受到 root font-size 影响，如果 Android 开启了字号放大模式，会导致整个布局崩盘。
2. Android 下 viewport scale 强制为 1，一些 Canvas 绘制的内容略为模糊。部分 Android 设备改变 scale 有 bug，机型太多较难定位。

## 改进的思路

保留原本 rem 方案的基础上，对于非 font-size 的单位渐进增强，在 `rem` 的规则下面新增一条 `vw` 的规则进行覆盖。此方案可以保证低版本 Android 的兼容问题。

## 　注意

如果原来是rem,也会新增一条 `vw` 的规则进行覆盖。
例如  padding:1rem; 会被转换成 padding:1rem;padding:1vw;



## 可能的缺陷

1. CSS 体积增加。



```
.title {
  /* you can override pixel replacement by adding a "px" *
   * comment after the declaration if you want to keep.  */

  font-size: 32px; /*px*/
  padding: 16px 0 18px;
}
```

```
.title {
   /* you can override pixel replacement by adding a "px" *
   * comment after the declaration if you want to keep.  */

  font-size: 32px; /*px*/
  padding: 4.444444444444445vw 0 5vw;
}
```



## Usage

Plug it into your PostCSS configuration.

```
var option = {
  vwUnit: 375, minPixelValue:2
};


postcss([require('postcss-pxtoremvw')(option)])
```

---
_Source: https://npm.io/package/postcss-pxtoremvw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._