手机端分割线的粗细

一般情况下有用border-bottom类似这种方法,或者用after的伪类height:1px或者rem控制高度,但是在手机端,实际展示出来的高度可能会有粗细不同,明明都是1px或者故意除以2等于0.5px出现的效果怎么会不一样呢,解决办法:采用transform的方法把线的高度做一个缩放

/**例如这样**/
.list-item::after {    
    position: absolute;
    content: "";
    transform-origin: 0 0;
    transform: scale(1, 0.5);
    height: 1px;
    background-color: #DFE7EC;
    left: 60px;
    right: 0px;
}

你可能感兴趣的:(手机端分割线的粗细)