在安卓手機中rem單位border-radius:50%畫圓變形的解決方案

罪魁禍首

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

畫了個圓，在ios中效果很理想。可是在安卓手機中會有變形的狀況存在，渲染方面確實安卓手機幹不過ios（畢竟安卓版本衆多，還有什麼0.5px的線等等的坑，ios都是能完美運行，安卓總得找hack方法）。
當使用px作單位，border-radius 50%出來的圓是不會變形的，多是安卓在rem計算過程當中產生偏差或者有什麼其餘因素形成的渲染問題。
網上有不少的辦法，border-radius:9999px;等等，但都沒什麼軟用。

手刃之法

這裏我推薦給你們一種方法,能解決這個問題。

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

就是使用transform scale，先提早把px/rem相關的值放大一倍。而後用transform scale(.5)縮小一倍，也就是咱們想要的倍數。而後你就會驚奇的發現渲染出來的圖案，賊圓！接着用transform-origin調整下圓的位置就大功告成了！
若是對你有幫助，點贊收藏就是對我最大的鼓勵啦！謝謝~~