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

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