做移动端开发时为了做适配，通常采用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下就没有这个问题。
解决方案：
- 很多文章指出直接用px, 但是这样做无法达到适配的目的
- 使用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
