Как я могу сделать высоту div меньше одного пикселя на мобильном устройстве? - PullRequest
Новая
       61

Как я могу сделать высоту div меньше одного пикселя на мобильном устройстве?

1 голос
/ 17 апреля 2020

Я пытаюсь создать представление списка со светлой линией внизу каждого элемента, чтобы разделить их (мой сайт только для мобильных устройств). Я отмечаю, что 1px имеет другую высоту на моем iphone pro 11 max, и мой samsung 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;
}

Вот снимок с моего iphone

1 Ответ

0 голосов
/ 17 апреля 2020

Нет, но вы можете добавить непрозрачность, чтобы она выглядела меньше. :) Или поменяй цвет. попробуйте это: 

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>
...