项目背景:用CSS画了一个单选框 但是在不同手机显示的却不圆
部分代码
.Ma_sign_sex{
width: 28px;
height: 28px;
margin-left: 16px;
border: 2px solid #bfbfbf;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.Ma_sign_sexChoosed{
position: absolute;
width: 14px;
height: 14px;
background: #ef8542;
border-radius: 50%;
}
效果:
在手机端会出现不圆的情况 是由于适配 px自动转化为rem 但是太小了 导致不规则
解决办法:
.Ma_sign_sex{
width: 56px;
height: 56px; //将宽高设置为原来的2倍
margin-left: 8px; //由于scale缩小 该元素占据的大小仍是缩放前的 所以我把原来的左边距也缩小了1倍
border: 2px solid #bfbfbf;
border-radius: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0.5);//这里让整体缩小为原来的1/2
}
.Ma_sign_sexChoosed{
position: absolute;
width: 28px;
height: 28px; //将宽高设置为原来的2倍
background: #ef8542;
border-radius: 50%;
}
新手记录 如有更好的方法欢迎交流