Мы знаем, что при написании мобильных страниц существует классическая проблема с 1 пикселем. Причина этой проблемы в том, что черновик дизайна на стороне ПК будет визуально увеличен при переносе на мобильный терминал.Решение этой проблемы заключается в уменьшении 1px до 0,5px.
Решение
1. Напишите 0,5px напрямую, что несовместимо.
2. Масштаб преобразования.
3. линейно-градиентный, градиент.
4. СВГ.
5.бокс-тень.
6. Просмотр в мета.
выполнить
Среди вышеперечисленных решений эффект наилучший, а чаще всего используется масштабирование transform, Далее посмотрим, как оно реализовано.
.box1 {
background: none;
margin-top: 10px;
margin-left: 200px;
height: 100px;
width: 100px;
border: 0.5px solid #000;
}
.box2 {
position: relative;
margin: 10px 0 0 200px;
border: none;
background: none;
height: 100px;
width: 100px;
}
.box2::after {
content: '';
position: absolute;
border: 1px solid #000;
top: 0;
left: 0;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
}
<div class="box"></div>
<div class="box1"></div>
<div class='box2'></div>
Добавьте границу к box2, используя псевдоэлементы. Обратите внимание, что здесь нужно добавить transform-origin: left top, иначе блок будет смещен от центра.
Это эффект на стороне ПК.Не кажется ли, что установка его непосредственно на 0,5 пикселя сделает его тоньше? Но давайте посмотрим на мобильную сторону.
На мобильной стороне только решение с масштабированием 0,5 соответствует эффекту.
Запишите рекорд!