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

Question

我正在尝试创建一个列表视图，并在每个元素的底部用一条浅线将它们分开（我的网站只是一个移动网站）。 我注意到，1px 在我的 iphone pro 11 max 和我的三星 a5 上具有不同的高度... 我认为没有什么比 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: 0.03em;
  opacity:0.5;
}
.c:after {
    height: 1px;
  background-color:#B2B2B2;
}

<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 class="c">
                    <div class="item-content">
                        <div>ligne</div>
                    </div>
                </li>
                ...
            </ul>
        </div>
    </div>
</div>