做移动端开发时为了做适配，通常采用rem作为单位，下面来写一个圆角

.round {
   width: 0.16rem;
    height: 0.16rem;
    border-radius: 50%;
    background: red;
    ...
}

<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>

image.png

在安卓中的展示效果如上图所示，第二个圆明显不是一个规范的圆型，原因是0.16rem换算成px是一个带小数点的值，安卓对小于1px的展示做了处理，从而导致圆角不圆，在ios下就没有这个问题。
解决方案：

1. 很多文章指出直接用px, 但是这样做无法达到适配的目的
2. 使用svg, 既可以适配，即使再小的圆形也能在不同屏幕上完美展示

// 圆的半径是0.16rem/2 = 0.08rem
<svg style={{ margin: '3px', height: '0.18rem'}}>
    <circle cx="100" cy="0.08rem" r="0.08rem" fill="red" />
 </svg>
...
 <svg style={{ margin: '3px', height: '0.18rem'}}>
    <circle cx="100" cy="0.08rem" r="0.08rem" fill="red" />
 </svg>       

image.png