在安卓手机中rem单位border-radius:50%画圆变形的解决方案 _解决方案

【在安卓手机中rem单位border-radius:50%画圆变形的解决方案】寸阳分阴须爱惜，休负春色与时光。这篇文章主要讲述在安卓手机中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下就没有这个问题。

解决方案：

很多文章指出直接用px, 但是这样做无法达到适配的目的
还有的说设置一个很大的值：border-radius:9999px,亲测不行（如：华为）
使用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调整下圆的位置就大功告成了！