WXSS 样式
【小程序】wxss与rpx单位以及全局样式和局部样式-腾讯云开发者社区-腾讯云 (tencent.com)
全局样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
局部样式
在页面.wxss 文件中定义的样式为局部样式，只作用于当前页面。 注意： 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
样式隔离与覆盖
样式覆盖 - Vant Weapp (youzan.github.io)
rpx单位
px转rpx
微信小程序——获取到px转化为rpx（根据设备宽高动态设置元素宽高）_wx.getsysteminfo rpx-CSDN博客
scss中写一个处理px转化rpx的函数_pxtorpx函数-CSDN博客
原生小程序npm组件px转rpx - 掘金 (juejin.cn)
微信小程序Vant组件px转rpx - 掘金 (juejin.cn)
在微信小程序里使用rpx，被坑了😕 ｜ 不同设备表现不同 - 掘金 (juejin.cn)
将vant所有组件的px转为rpx
npm i gulp gulp-postcss postcss-px2units -D
根目录创建gulpfile.js文件
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtounits = require('postcss-px2units');
gulp.task('css', function () {
// 这里的路径都是从项目根目录开始
return gulp.src(['miniprogram/miniprogram_npm/@vant/weapp/**/*.wxss'])
.pipe(postcss([pxtounits({
// multiple 是配置1px对应多少rpx, 这里表示 1px 对应 2rpx
multiple: 2,
targetUnits: 'rpx'
})]))
.pipe(gulp.dest('miniprogram/miniprogram_npm/@vant/weapp/'));
});
使用scss函数将px转rpx
/**
1px对应多少rpx
当前值表示: 1px对应2rpx
典型手机的px与rpx对应关系: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D
**/
$multiple: 2rpx;
/*
转换函数 (15) ==> 30rpx (15,30) ==> 30rpx 60rpx
转换函数 params 可传参数 无上限
使用
.title {
width: cover(375); // width:750rpx;
height: cover(10); // height:20rpx;
padding:cover(10,20,30,40); // padding:20rpx 40rpx 60rpx 80rpx;
box-shadow: cover(0,1,16) rgba(56, 56, 71, 0.2); // box-shadow: 0 2rpx 16rpx rgba(56, 56, 71, 0.2);
}
*/
@function cover($t...) {
$i: 1;
$result: 0;
@while $i <=length($t) {
@if($i ==1) {
$result: (
nth($t, $i) * $multiple
);
}
@else {
$result: append($result, (nth($t, $i) * $multiple))
}
$i: $i + 1;
}
@return $result;
}
