px-rpx-vw-loader
px-rpx-vw-loader将项目中的rpx或者px单位转为vw,实现移动端自适应布局。
rpx的使用方法与微信小程序一样。
使用方法(以vue工程为例)
// vue.config.js 配置文件moduleexports = { configmodule options // 根据设计稿尺寸修改,默认是750(iPhone 6) width: 750 // 转换单位 unit: 'rpx' // 转换比例 ratio: 1 // 精度 unitPrecision: 6 ; }
- 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的对象语法注意
禁止使用如下形式:
data: { activeColor: 'red', fontSize: 30}
data: { activeColor: 'red', fontSize: 30} 请修改为如下形式:```htmldata: { activeColor: 'red', fontSize: '30rpx'}
即不能将数值和rpx分离,否则loader无法解析。
data: { activeColor: 'red', fontSize: '30px'}
即不能将数值和px分离,否则loader无法解析。
示例(以vue工程为例)
or