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

2023年1月6日 155次阅读 来源: messchow

罪魁祸首

  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调解下圆的位置就功德圆满了！
假如对你有协助，点赞珍藏就是对我最大的勉励啦！感谢~~

    原文作者：messchow
    原文地址: https://segmentfault.com/a/1190000017975531
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞