uniapp微信小程序适配屏幕

在Uniapp中，可以使用CSS media query来适配不同的屏幕大小。

1. 首先，在你的uniapp项目中，找到App.vue文件，添加以下代码：

<style>
  /* 适配小程序屏幕 */
  @media screen and (min-width: 320rpx) {
    html {
      font-size: 42.6666667px;
    }
  }
  @media screen and (min-width: 375rpx) {
    html {
      font-size: 50px;
    }
  }
  @media screen and (min-width: 414rpx) {
    html {
      font-size: 55.2px;
    }
  }
  @media screen and (min-width: 768rpx) {
    html {
      font-size: 102.4px;
    }
  }
</style>

2. 这里我们使用了rem单位，因此需要在main.js中设置根元素的字体大小：

// main.js
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 设置根元素的字体大小
uni.getSystemInfo({
  success: function(res) {
    let w = res.windowWidth
    Vue.prototype.$w = w
    let fz = w / 750 * 100
    document.getElementsByTagName('html')[0].style.fontSize = fz + 'px'
  }
})

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

这样就可以实现小程序屏幕的适配了。注意，这里的适配方案仅供参考，具体的适配方案需要根据实际情况进行调整。