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

35次阅读

共计 608 个字符，预计需要花费 2 分钟才能阅读完成。

罪魁祸首
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 调整下圆的位置就大功告成了！如果对你有帮助，点赞收藏就是对我最大的鼓励啦！谢谢~~