摘要：那么如何在移動端展示時分割線的高度小于呢常用方案通常的做法如下兼容問題定義完這個樣式，在手機上看看，幸運的你可能會看到想要的效果已經展示了，然而這個存在兼容性問題，有的手機上線條沒有展示，有的手機上會出現滑動屏幕時線條時有時無。
起因
現在移動端大部分設備都配備了retina屏幕，在做移動端適配時通常會將viewport設置為device-width值，這樣一來1px就等于1物理像素*屏幕縮放值，iPhone6s上1px就等于2個物理像素。那么如何在移動端展示時分割線的高度小于1px呢？
常用方案
通常的做法如下：
.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）
加上這個就可以完美兼容了，至于為什么~等我想到再補充
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111909.html
