关于移动端小于1px细线解决办法
关于移动端小于1px细线解决办法
1、最简单直接的方法（适用于少量引用，一般用于页面分割布局）
<div style="height:1px;background:#cccccc;width:100%;transform: scaleY(.5);"> </div>
高度为1px，进行Y方向缩放，效果就是小于1px的横向直线，如果是宽度为1px，进行X方向缩放，然后再定义高度，效果就是小于1px的纵向直线。
2、高效的方法（适用于列表，对列表上的每条数据进行分割）
css
.testClassItem{
position: relative;
}
.testClassItem:after{
position: absolute;
right: 0;
bottom: 0;
left: 0px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #D1D1D1;
}
HTML
//列表页面
<div>
//需要循环展示的列表
<div class="testClassItem">
</div>
<div class="testClassItem">
</div>
</div>
在列表需要循环的div上定义一个class，引用这个class之后在每一条数据下面都会有一条小于1px的细线将数据进行分割。
3、将border的四周边框线都设置成小于1px的细线
将div的内容如字体大小、宽度、高度、padding等都设置成理想状态的2倍，然后通过transform: scale(.5);对div进行统一缩小，这样虽然实现的div四周边框的统一缩放，但是页面会出现很多空白，这个是由于先前设置div宽高统一放大2倍造成的。解决办法就是在这个div外面在套一个div，设置他的宽高为理想状态的尺寸，然后再设置overflow:hidden即可解决;
版权声明：本文为luo-chen原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。