做移動端開發(fā)時為了做適配，通常采用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

在安卓中的展示效果如上圖所示，第二個圓明顯不是一個規(guī)范的圓型，原因是0.16rem換算成px是一個帶小數(shù)點的值，安卓對小于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