taro 设计稿以及尺寸大小
配置了
designWidth: 375, // 设计稿的尺寸
deviceRatio: {
640: 2.34 / 2,
750: 1,
375: 2,
828: 1.81 / 2
},
Taro 默认会对所有单位进行转换。如果设计稿的尺寸是 375, 即从设计稿上量的长度是100px, 那么尺寸书写就是100px;当转成微信小程序的时候,尺寸将默认装换成200rpx; 如果设计稿的尺寸是 750px, 即从设计稿上量的长度是100px, 那么尺寸书写就是100px;当转成微信小程序的时候,尺寸将默认装换成 100rpx;
微信小程序单位转换问题
注意:rpx是和宽度有关的单位,屏幕越宽,该值实际像素越大。
375 1rpx = 0.5px 750 1rpx = 1px
竖屏切换成横屏尺寸大小
横屏简单粗暴就是原本100rpx的,现在写成 calc(100vmin / 7.5);
如果是用的框架,可以用scss的,就自己去封装个函数
// 横屏适配 rpx 转 vmin @function vpx(rpx) { //rpx为需要转换的字号 @return #{math.div($rpx, 7.5)}vmin; }
然后代码里就去写 width: vpx(100); height: vpx(50); border: vpx(1) solid #f5f5f5