移动端1px线的实现

2024年4月9日 94次阅读 来源: 小麦

起因

现在移动端大部分设备都配备了retina屏幕，在做移动端适配时通常会将viewport设置为device-width值，这样一来1px就等于1物理像素*屏幕缩放值，iPhone6s上1px就等于2个物理像素。那么如何在移动端展示时分割线的高度小于1px呢？

常用方案

通常的做法如下：

<div class="box">
    <hr class="line_bottom" >
</div>
.box {
    position: relative;
}
.line_bottom{
    height: 1px;
    width:100%;
    background-color: #b7daf0;
    position:absolute;
    transform: scaleY(0.3);
    -webkit-transform: scaleY(0.3);
}

兼容问题

定义完这个样式，在手机上看看，幸运的你可能会看到想要的效果已经展示了，然而这个存在兼容性问题，有的手机上线条没有展示，有的手机上会出现滑动屏幕时线条时有时无。此时还需要在父元素加上以下属性：

transform：perspective（500）

加上这个就可以完美兼容了，至于为什么~等我想到再补充

    原文作者：小麦
    原文地址: https://segmentfault.com/a/1190000009153217
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞