安卓中border-radius:50%圆角展示不圆问题

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

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

image.png

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

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

// 圆的半径是0.16rem/2 = 0.08rem

...
        

image.png