如何使div高度小于移动设备上的一个像素？

Question

我正在尝试创建一个列表视图，在每个元素的底部加上一条细线以分隔它们（我的网站仅是移动网站）。我注意到，iphone pro 11 max和三星a5的1px高度不同...我认为没有什么比1px小，但似乎在em中设置了高度，却更小（对我来说更漂亮）。我可以用0.03em这样的高度吗？ （1px太大又难看）。这是我的演示：https://codepen.io/lokomass/pen/ExVKQjK

<div class="page">
<div class="page-content">
    <div class="content-block">
        <div class="list-block">
            <ul>
                <li class="a">
                    <div class="item-content">
                        <div>ligne</div>
                    </div>
                </li>
                <li class="b">
                    <div class="item-content">
                        <div>ligne</div>
                    </div>
                </li>
                ...
            </ul>
        </div>
    </div>
</div>

ul {
      list-style: none;
}
li {
      padding: 10px 0;
      position: relative;
}
li:after {
    left: 0;
    bottom: 0;
    top: auto;
    right: auto;
    width: 100%;
    z-index: 15;
    content: '';
    display: block;
    position: absolute;
    background-color: #000;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}
.a:after {
    height: 1px;
}
.b:after {
    height: 0.03em;
}

Here is a snap from my iphone

Answer 1

不，但是您可以添加不透明度，因此它看起来更小。 :)试试这个：

ul {
      list-style: none;
}
li {
      padding: 10px 0;
      position: relative;
}
li:after {
    left: 0;
    bottom: 0;
    top: auto;
    right: auto;
    width: 100%;
    z-index: 15;
    content: '';
    display: block;
    position: absolute;
    background-color: #000;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}
.a:after {
    height: 1px;
}
.b:after {
    height: 1px;
  opacity:0.5;
}

<div class="page">
<div class="page-content">
    <div class="content-block">
        <div class="list-block">
            <ul>
                <li class="a">
                    <div class="item-content">
                        <div>ligne</div>
                    </div>
                </li>
                <li class="b">
                    <div class="item-content">
                        <div>ligne</div>
                    </div>
                </li>
                ...
            </ul>
        </div>
    </div>
</div>