# rem-core

> 使px单位转rem单位。可以配合淘宝flexible.js使用!

Latest version **0.0.9** (published 2016-08-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install rem-core
pnpm add rem-core
yarn add rem-core
bun add rem-core
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2016-08-15 |
| First published | 2016-07-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | neverland |
| Keywords | rem, px to rem, px2rem |

## Links

- npm: https://www.npmjs.com/package/rem-core
- Repository: https://github.com/Neverland/rem-core
- Homepage: https://github.com/Neverland/rem-core#readme
- Issues: https://github.com/Neverland/rem-core/issues
- npm.io page: https://npm.io/package/rem-core

## Dependencies (2)

- [css](https://npm.io/package/css.md) ^2.2.1
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.0.9 (latest) — 2016-08-15
- 0.0.8 — 2016-08-15
- 0.0.7 — 2016-08-04
- 0.0.6 — 2016-08-04
- 0.0.5 — 2016-08-02
- 0.0.3 — 2016-07-28
- 0.0.2 — 2016-07-28
- 0.0.4 — 2016-07-28

## README

# rem-core

使px单位的css属性自动转化为rem为单位的nodejs 包文件。

-----------------
    - 使用node-css把css解析后,对px为单位对属性进行rem转换处理。
    - 对文字进行特殊处理追加至产出的css文件之后。
    - developer只用专注开发,配置灵活方便, 对原始文件无侵入。
-----------------

## flexible.js
默认可以配合淘宝的[flexible.js](https://github.com/amfe/lib-flexible)使用

## 调用方式

```javascript
    rem(content, file, config);
```


## Usage

* 在css文件第一行声明/* !@norem */ 则整个文件都不做处理(建议用自动化工具控制)

```css
body {
    border-top: 1px;
    border-bottom: 10px;
    padding: 10px; /* @norem */
    background-size: 10px 10px;
}
```

输出:

```css
body {
    border-top: 1px;
    border-bottom: 0.5557rem;
    padding: 10px;
    background-size: 0.5557rem 0.5557rem;
}
```

## Option

- rem `{Number}` 1rem=多少px `default` 18
- min `{Number}` 最小转化值 `default` 3
- exclude `{Array.<String>}` 忽略的样式 `default` `['width', 'height', 'background', 'background-size']`
- fontSize2Rem: `{Boolean}` 字体大小是否转rem单位 `default` true 
    *值为false时会根据dpr输出1倍,2倍,3倍大小的css样式, 这种模式更适合于以内容为主的阅读页面。
    *可以根据实际需要写多个不同的配置
- type `{?string}` default `default` 支持[flexible](https://github.com/amfe/lib-flexible)
- dpr `{!Number}` 1, 2, 3 如设计稿的尺寸为
    *320-375 那么dpr为1 
    *640-720 那么dpr为2 


## about font-size
- 对font-size进行了特殊处理,没有使用rem而是根据dpi输出三种大小字体

### type: default && fontSize2Rem: false

```css
@media(-webkit-min-device-pixel-ratio: 2) {    
    .course-name {
        font-size: 36px ;
    }
}
@media(-webkit-min-device-pixel-ratio: 3) {
    .course-name {
        font-size: 54px ;
    }
}
```

### type: null && fontSize2Rem: false
```
[data-dpr="1"] .course-name {
    font-size: 18px; 
}
[data-dpr="2"] .course-name {
    font-size: 36px; 
}
[data-dpr="3"] .course-name {
    font-size: 54px; 
}
```

## 关于原始值
    -在css未进行压缩模式时可以看到原始值
```css
    margin: 0.6668rem/* @source-size: 25px; */ 0;
```

## changelog

<table>
    <thead>
        <tr>
            <th>版本</th>
            <th>类型</th>
            <th>说明</th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            <td>v0.0.1</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </tbody>
</table>

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