使用border-radius写的小圆点在安卓手机显示变形问题解决方案安卓手机因为DPR换算问题，导致通过rem,rpx

1、第一张图为有问题时的对比。第二张图为优化之后的对比。

2、左侧为安卓系统手机效果，右侧为IOS系统手机显示效果。

在项目中尝试使用rem、rpx，都会出现问题，使用px时显示正常，但因为本项目是使用uni-app开发app程序，因此不能直接使用px来实现。

经过查阅资料了解下来，导致问题的原因为安卓手机中DPR换算问题。所以可能在不同安卓手机上表现会有些许不同。关于DPR相关的知识，这里就不做阐述，有需要了解的可自行搜索了解。

解决问题的思路为，将原设计稿中小圆点元素涉及到的尺寸都放大N倍，然后在通过transform: scale(N);将元素缩小N倍，这样就得到了一个跟设计稿尺寸相符的效果。

.tip {
  width: 32rpx;
  height: 32rpx;
  background: red;
  border-radius: 16rpx;
}

.tip {
  width: 64rpx;
  height: 64rpx;
  background: red;
  border-radius: 32rpx;
  transform: scale(0.5);
}

使用border-radius写的小圆点在安卓手机显示变形问题解决方案