# postcss-viewport

> > 默认使用`vw`作为布局单位，对于不支持`vw`单位的

Latest version **1.0.2** (published 2018-03-07) · 0 weekly downloads

## Install

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

## 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.2 |
| Published | 2018-03-07 |
| First published | 2018-03-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zgaohaifeng |

## Links

- npm: https://www.npmjs.com/package/postcss-viewport
- npm.io page: https://npm.io/package/postcss-viewport

## Recent versions

- 1.0.2 (latest) — 2018-03-07
- 1.0.1 — 2018-03-06

## README

## postcss-px2viewport

> 默认使用`vw`作为布局单位，对于不支持`vw`单位的

> 对于标记了`/*no*/`的，则不做处理，依然使用px进行布局
> 1px 不做处理

### how to use
#### webpack

```javascript
var px2viewport = require('postcss-px2viewport');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2viewport({viewportWidth: 375})];
  }
}
```

##### input
```css
.class {
  width: 10px; /*no*/
  border: 1px solid black;
  background-size: 30px 10px;
}
```

##### output
```css
.class {
  width: 10px;
  border: 1px solid black;
  background-size: 4vw 1.3333333vw;
}
```

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