如何實現(xiàn)在移動端中顯示一像素的邊框

仔細看兩條線是不一樣的

實現(xiàn)方案一：0.5像素

標準邊框語法

div{

? ? border: 1px solid black;

}

高清屏邊框語法

@media (-webkit-min-device-pixel-ratio: 2) {

? ? div {

? ? ? ? border-width: 0.5px;

????}

}

以上方式就可以將虛擬一像素變成真實一像素

實現(xiàn)方案二：viewport

在devicePixelRatio = 2 時，輸出viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 時，輸出viewport

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

實現(xiàn)方案三：?transform: scale(0.5)

height:1px;

-webkit-transform: scaleY(0.5);

-webkit-transform-origin:0 0;

overflow: hidden;

實現(xiàn)方案四 ：box-shadow

利用css 對陰影處理的方式實現(xiàn)0.5px的效果底部一條線

?-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

實現(xiàn)方案五：background-image

設(shè)置1px通過css 實現(xiàn)的image，50%有顏色，50%透明

綜合理想的方案：

需要有sass基礎(chǔ)

以上方法可供參考，實際開發(fā)中選擇使用！