# rem-flexible

![npm version](https://img.shields.io/npm/v/rem-flexible)
![npm downloads](https://img.shields.io/npm/dm/rem-flexible)
![license](https://img.shields.io/npm/l/rem-flexible)

This is a fork of [amfe-flexible](https://github.com/amfe/lib-flexible)

This package is published with some minor changes.
The main function flexible can be passed two optional arguments.
The first is design width, The second is pixel per rem.

[Classic edition (0.3.2)](https://github.com/amfe/lib-flexible/tree/master)

> 由于`viewport`单位得到众多浏览器的兼容，`lib-flexible`这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用`viewport`来替代此方案。`vw`的兼容方案可以参阅《[如何在Vue项目中使用vw实现移动端适配](https://www.w3cplus.com/mobile/vw-layout-in-vue.html)》一文。

## Usage

### Using unpkg

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="//unpkg.com/rem-flexible"></script>
<script>
  // 设计稿宽度为750px，每1rem等于100px
  flexible(750, 100)
</script>
```

### Using npm package

```bash
npm i rem-flexible
```

import in HTML file

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/rem-flexible/dist/flexible.umd.min.js"></script>
<script>
  // 设计稿宽度为750px，每1rem等于100px
  flexible(750, 100)
</script>
```

or import esm module

```js
import flexible from 'rem-flexible'
flexible(750, 100)
````

## Related projects

- [postcss-adaptive](https://www.npmjs.com/package/postcss-adaptive)

## Browser Compatibility

![Browser Compatibility](https://img.shields.io/badge/browserslist-Android%20%3E%3D%205%2CiOS%20%3E%3D%2010-informational)

## Changelog

See [CHANGELOG.md](CHANGELOG.md)