摘要：那么如何在移动端展示时分割线的高度小于呢常用方案通常的做法如下兼容问题定义完这个样式，在手机上看看，幸运的你可能会看到想要的效果已经展示了，然而这个存在兼容性问题，有的手机上线条没有展示，有的手机上会出现滑动屏幕时线条时有时无。
起因
现在移动端大部分设备都配备了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）
加上这个就可以完美兼容了，至于为什么~等我想到再补充
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111909.html
