1、利用css3的zoom属性来修改组件
.wx-switch-input { zoom: .6; }
效果图如下:
可以看出来,这种改变方式,不会导致样式错乱,但是因为使用的是缩放属性,所以如果不通过动态来控制它的话,那么不论你分辨率如何改变,它的尺寸也不会发生变化。
因此,需要根据页面分辨率不同来设置不同的zoom值,才能做到比较完美的结果。
2、修改switch组件的属性值
/* switch */ .wx-switch-input{ width: 82rpx!important; height: 40rpx!important; } /*关闭状态*/ .wx-switch-input::before{ width: 80rpx!important; height: 36rpx!important; } /*开启状态*/ .wx-switch-input::after{ width: 38rpx!important; height: 36rpx!important; }
效果图如下:
可以看的出来,当分辨率改变之后,样式就会错乱,所以不推荐。