移动端1px会显示为2px;
解决方式很多，这里介绍比较常用的一种方式--css的transform属性缩放
1. 上边框 相当于 border-top
<div class="bordert1px"></div>
css
/*top*/ .bordert1px { position: relative; } .bordert1px:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #d8d8d8; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); // 纵向缩放 }
细线--直接缩放就好了
<hr />
css
hr{background: #d8d8d8;width:1px;height:1rem;border:none;transform: scaleX(0.5);margin: 0;}