移動端1px細線解決方案--利用transform縮放方式

移動端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;}

 若是使用vux的話，vux也提供了1px解決方案 https://doc.vux.li/zh-CN/css/1px.html