移動端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）

加上這個就能夠完美兼容了，至於爲何~等我想到再補充