关于移动端小于1px细线解决办法

Posted 2021-01-14 luo-chen

1、最简单直接的方法（适用于少量引用，一般用于页面分割布局）

<div style="height:1px;background:#cccccc;width:100%;transform: scaleY(.5);">&nbsp;</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即可解决;