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

最新推荐文章于 2020-10-15 16:18:12 发布

转载最新推荐文章于 2020-10-15 16:18:12 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017975531

本文针对安卓设备上使用border-radius属性渲染圆形时出现的变形问题，提出了一种使用transformscale方法的解决方案，确保了在不同安卓版本和设备上的图形渲染一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

罪魁祸首

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