摘要：那么如何在移動(dòng)端展示時(shí)分割線的高度小于呢常用方案通常的做法如下兼容問題定義完這個(gè)樣式，在手機(jī)上看看，幸運(yùn)的你可能會(huì)看到想要的效果已經(jīng)展示了，然而這個(gè)存在兼容性問題，有的手機(jī)上線條沒有展示，有的手機(jī)上會(huì)出現(xiàn)滑動(dòng)屏幕時(shí)線條時(shí)有時(shí)無。
起因
現(xiàn)在移動(dòng)端大部分設(shè)備都配備了retina屏幕，在做移動(dòng)端適配時(shí)通常會(huì)將viewport設(shè)置為device-width值，這樣一來1px就等于1物理像素*屏幕縮放值，iPhone6s上1px就等于2個(gè)物理像素。那么如何在移動(dòng)端展示時(shí)分割線的高度小于1px呢？
常用方案
通常的做法如下：
.box {
position: relative;
}
.line_bottom{
height: 1px;
width:100%;
background-color:?#b7daf0;
position:absolute;
transform:?scaleY(0.3);
-webkit-transform:?scaleY(0.3);
}
兼容問題
定義完這個(gè)樣式，在手機(jī)上看看，幸運(yùn)的你可能會(huì)看到想要的效果已經(jīng)展示了，然而這個(gè)存在兼容性問題，有的手機(jī)上線條沒有展示，有的手機(jī)上會(huì)出現(xiàn)滑動(dòng)屏幕時(shí)線條時(shí)有時(shí)無。此時(shí)還需要在父元素加上以下屬性：
transform：perspective（500）
加上這個(gè)就可以完美兼容了，至于為什么~等我想到再補(bǔ)充
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/111909.html
