这个问题纠结了好多天,安卓上使用rem单位,圆变形,但在ios上显示正常。
查了很多资料,发现是rem适配的问题,安卓对rem的计算可能有些误差,导致在不同的安卓手机上,圆会有不同程度的变形。
换用px,一切正常,但由于是移动端项目,必须用rem做适配,所以px行不通。
.circle{
position: absolute;
width: 0.14rem;
height: 0.14rem;
border: 0.04rem #e5e5e5 solid;
border-radius: 50%;
}
<div class="circle"></div>
目前的解决方法是:
.container{
position: relative;
width: 0.22rem;
height: 0.22rem;
}
.circle{
position: absolute;
width: 1.4rem; //放大10倍
height: 1.4rem; //放大10倍
border: 0.4rem #e5e5e5 solid; //放大10倍
border-radius: 50%;
transform: scale(.1); //缩小10倍
transform-origin: 0% center; //调整圆的位置
}
<div class="container">
<div class="circle"></div>
</div>
在圆这个div外面再套一个父div,设置相对定位,宽和高为圆的宽高,子div设置绝对定位,宽和高先放大n倍,再缩小n倍
如: