码迷,mamicode.com
首页 > 移动开发 > 详细

rem单位border-radius:50%在安卓手机中画圆变形

时间:2019-07-09 09:15:39      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:宽高   解决   spl   很多   lin   不同   lock   col   pre   

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下就没有这个问题。

解决方案:

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

rem单位border-radius:50%在安卓手机中画圆变形

标签:宽高   解决   spl   很多   lin   不同   lock   col   pre   

原文地址:https://www.cnblogs.com/caofeng11/p/11152779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!