移动端边框线的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是会根据设备物理像素来适配,实际效果很差(手机端看略粗)。
这个方法是参照滴滴做的,效果还可以

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容