从零开始自制微信小程序10--初识微信小程序6--让元素大小适配不同宽度屏幕-响应式长度单位rpx

响应式长度单位rpx

->问题引入：如何让元素大小适配不同宽度屏幕

希望图片宽和高均为屏幕宽度一半

<view class='container'>
  <image class='about-banner' src="/images/004.jfif"></image>
  <text>电影周围看</text>
  <text>我每周推荐一部好片</text>
  <text>我的微博：xxxx</text>
</view>

.container {
  background-color: #eee;
  height:100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items:center;
}
.about-banner {
  width: 187.5px;
  height: 187.5px;
}

希望在所有设备上图片的宽和高都能保持为屏幕宽度的一半

使用px这种绝对长度无法始终保持为屏幕的一半，这就是小程序引入的一个相对长度单位rpx。

小程序规定所有设备的屏幕宽高均为750rpx

<view class='container'>
  <image class='about-banner' src="/images/004.jfif"></image>
  <text style="font-weight: bold; font-size: 60rpx;">电影周围看</text>
  <text>我每周推荐一部好片</text>
  <text>我的微博：xxxx</text>
</view>

.container {
  background-color: #eee;
  height:100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items:center;
}
.about-banner {
  width: 375rpx;
  height: 375rpx;
  border-radius: 50%;
}