移动端1px线的实现

原由

如今移动端大部分设备都配备了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）

加上这个就能够完美兼容了，至于为何~等我想到再补充