px-rpx-vw-loader

px-rpx-vw-loader将项目中的rpx或者px单位转为vw，实现移动端自适应布局。

rpx的使用方法与微信小程序一样。

使用方法（以vue工程为例）

1// vue.config.js 配置文件
2module.exports = {
3    chainWebpack: (config) => {        
4        config.module
5            .rule('rpx')
6            .test(/\.vue$/)
7            .use('px-rpx-vw-loader')
8            .loader('px-rpx-vw-loader')
9            .options({
10                // 根据设计稿尺寸修改，默认是750（iPhone 6）
11                width: 750,
12                // 转换单位
13                unit: 'rpx',
14                // 转换比例
15                ratio: 1,
16                // 精度
17                unitPrecision: 6
18            })
19            .end();
20    }
21}

• width的取值是375到2160的正整数，默认是750，即iPhone 6的设计稿尺寸。
• unit是取值为'rpx' 或者 'px'的字符串，即将文件中的'rpx'或者'px'单位转为vw，默认取值是'rpx'。
• ratio是转换比例，取值是大于0的数值。对于iPhone 6 750的设计稿，页面采用'rpx'相对单位时，ratio设置为1即可。对于iPhone 6 750的设计稿，页面采用'px'单位时（需要根据设计稿标注的尺寸除以2），ratio设置为2即可，当然也可以按照设计稿直接设计稿上标注的像素值，ratio设置为1。
• unitPrecision是转换精度，即保留小数点位数,默认是6位。

说明

vue文件中的template、js和style样式表中的样式单位（rpx或者px），本loader均能实现转换为vw。

class样式支持

• 对象语法
• 数组语法

style样式支持

• 对象语法
• 数组语法

style的对象语法注意

禁止使用如下形式：

1<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'rpx' }"></div>

2data: {

3  activeColor: 'red',

4  fontSize: 30
5}

1<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

2data: {

3  activeColor: 'red',

4  fontSize: 30
5}
6
7请修改为如下形式：
8```html
9<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

10data: {

11  activeColor: 'red',

12  fontSize: '30rpx'
13}

即不能将数值和rpx分离，否则loader无法解析。

1<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

2data: {

3  activeColor: 'red',

4  fontSize: '30px'
5}

即不能将数值和px分离，否则loader无法解析。

示例(以vue工程为例)

使用方法

1<template>
2    <div class="root" v-bind:class="{ active: isActive }" v-bind:style="{ fontSize: fontSize }"></div>
3</template>
4<script>
5export default {
6    data() {
7        return {
8            isActive: true,
9            fontSize: '30rpx'
10        }
11    }
12};
13</script>
14<style>
15.root{
16    width:100%;
17    height:87rpx;/*设计高度是多少,此处就填写多少*/
18}
19.active{
20    font-size:20rpx;
21}
22</style>

or

1<template>
2    <div class="root" v-bind:class="{ active: isActive }" v-bind:style="{ fontSize: fontSize }"></div>
3</template>
4<script>
5export default {
6    data() {
7        return {
8            isActive: true,
9            fontSize: '30px'
10        }
11    }
12};
13</script>
14<style>
15.root{
16    width:100%;
17    height:87px;/*设计高度是多少,此处就填写多少*/
18}
19.active{
20    font-size:20px;
21}
22</style>