介绍

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

安装

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

使用

webpack.config.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 屏幕宽度。由于网页的纵向是可以无限延展滚动的，所以适配问题，只是产生于在宽度方向上的。