移动端边框线的1px

/*边框线1px在移动端适配*/
.fline{
    position: relative;
    padding: .21333333rem 0 .13333333rem;
    vertical-align: middle;
}
.fline::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

在手机移动端设置边框线1px是会根据设备物理像素来适配,实际效果很差(手机端看略粗)。
这个方法是参照滴滴做的,效果还可以

你可能感兴趣的:(移动端边框线的1px)