px2vw-mobile/README.md

   # 介绍

![](https://img.shields.io/npm/dt/px2vw-mobile.svg) 
![](https://img.shields.io/npm/v/px2vw-mobile.svg)  
![](https://img.shields.io/badge/language-nodeJS-red.svg)
# 介绍

这是一个webpack的loader，一段nodeJs程序。核心功能：把px转化成vw，针对移动端的样式做适配。

# 安装

  npm i px2vw-mobile -D
  or
  yarn add  px2vw-mobile -D

# 使用

webpack.config.js :

```js
module.exports = {
    	module: {
		rules: [
            {
                test: /\.mobile$/,//可以指定处理自定义后缀名的样式文件
                use: [MiniCssExtractPlugin.loader, {
                    loader: 'css-loader',
                }, {
                    loader: 'px2vw-mobile',
                    options: {
                    width: 750,//设计稿的宽度
                    precision:2,//转换后保留的小数位数
                    unit:'vw',//转换后的单位，视口的宽度
                    minPx: 12//小于等于 12px 的不会被转换
                    }
                }]
		    }
        ]}
}
```

# 能力

- 支持px to vw ✅
- 支持指定单位精确到的小数位数 ✅
- 支持最小不被转换的像素值(例如：一些微距，不希望动态变化，影像布局差异化)✅
- 支持标有 /* no */ 的样式语句不被转换 ——TODO
- 支持配置的黑名单属性是不会进行转化的,例如：font-size、border ——TODO
<!-- - 支持指定处理自定义后缀名的样式文件 -->

# API

- width: 750, //(Number) UI design px
- precision:2, //(Number) The decimal numbers 
- unit:'vw', //(String) 可选值 vw rem(TODO) 
- minPx: 1, //(Number) If minimum px greater than or equal can change from px to vw


# 其他说明

- 默认参数:
 width:750,
 unit:'vw',
 precision:2,
 minPx: 4

- vw 模式下：width 必传
- 小于等于 minPx 原样返回px
- 标记了 /* no */ 原样返回px ---TODO


## TODO 功能
px2rem:
- dpr:1, (Number) 1,2,3 
- rootPx 跟元素的font-size
- dpr 几倍屏幕 得到1rem = rootPx * dpr 正常是运行时，是去读 window.devicePixelRatio。这里想手动设定好dpr给一个额定输出。
- rem 模式下：rootPx 必传


## 同类插件
postcss-px-to-viewport
# 相关知识

- rem 和 vw 都是移动端适配 较为 主流的方案，rem 比 vw 要早，因为当时vw很多浏览器还不支持。现在基本没有这个问题后，vw也很普遍了。
- 视口：可视区域。
- vw ：vw是视口单位，“viewport width” 的缩写。一个屏幕的宽度 = 100vw,所以 1vw = 1/100 屏幕宽度。由于网页的纵向是可以无限延展滚动的，所以适配问题，只是产生于在宽度方向上的。