rem單位border-radius:50%在安卓手機中畫圓變形

i{
       display: inline-block;
       width: .08rem;
       height: .08rem;
       background-color: #D0021B;
       border-radius: 50%;
        /*border-radius: .08rem;*/
   };

使用border-radius:50%,或者border-radius的值與寬高相等，都可實現一個完美的圓形，但是在不同的安卓手機中，會有不同程度的變形（有的扁圓，有的大，有的小）；當使用px做為寬高的單位，border-radius:50%畫出來的圓是不會變形的；但使用rem時，rem在換算為px時，會是一個帶小數點的值，安卓對小於1px的做了處理（不同瀏覽器對小於1px的處理方式不同，有的采用四舍五入，有的大於某個值展示1px否則就舍去），從而導致圓角不圓；在ios下就沒有這個問題。

解決方案：

1. 很多文章指出直接用px, 但是這樣做無法達到適配的目的
2. 還有的說設置一個很大的值：border-radius:9999px,親測不行（如：華為）
3. 使用svg, 既可以適配，即使再小的圓形也能在不同屏幕上完美展示，但又很麻煩

推薦之法：

  i{
       display inline-block
       width .16rem
       height .16rem
       background-color #D0021B
       border-radius 50%
       transform scale(.5)
       transform-origin: 0% center
   }

先把width，height的值放大一倍，然后用transform scale(.5)縮小一倍，接着用transform-origin調整下圓的位置就大功告成了！