taro 微信小程序尺寸转换以及横竖屏切换时尺寸切换

846 阅读1分钟

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