移动端1px物理像素边框适用于高清屏。设备像素比大于1的。
用伪元素，定位实现1px物理像素边框的显示。
再利用媒体查询去修改设备像素比等于2的，等于3的，进行scaleY缩放。
设备像素比是2的，缩放.5倍，设备像素比是3的，缩放.33倍。
-webkit-min-device-pixel-ratio: 2适用于webkit内核
min-resolution: 2dppx适用于火狐
具体实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit:cover">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: #ccc;
position: relative;
}
.box::after{
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: blue;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2) {
.box::after{
transform: scaleY(.5);
}
}
@media (-webkit-min-device-pixel-ratio: 3),(min-resolution: 3) {
.box::after{
transform: scaleY(0.33);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
版权声明：本文为weixin_45376220原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。