安卓手机对于消息中心右上角提示小红点的兼容处理

项目背景：要实现如图一样的消息提示

 

问题：由于项目中使用了postcss-pxtorem的插件，所以导致一些正常的css在安卓机上不是圆的，border-radius写的是px,但是会自动转成rem,从而变成小数，安卓机解析偏差就变形了。

解决方案：先放大再缩小

 1 .unread-info {
 2    background-color: #f56c6c;
 3    border-radius: 30px;
 4    color: #fff;
 5    display: inline-block;
 6    font-size: 36px;
 7    height: 52px;
 8    line-height: 52px;
 9    padding: 0 16px;
10    min-width: 52px;
11    text-align: center;
12    white-space: nowrap;
13    position: absolute;
14    transform:  translateY(-50%) translateX(100%) scale(0.25);
15    transform-origin:center left;/*由于小圆点的伸缩方向需要是右边，所以这样改，center的话会像两边扩展，位置就会跑偏*/
16    top: 6px;/*这是对于父元素的定位*/
17    right: 40px;
18 }
19              

 

来源：https://www.cnblogs.com/llff123/p/11798900.html