看了很多方案，使用伪元素的方案最合理，简单，容易理解
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1px</title>
<style>
/* box-shadow方案 */
.box-shadow-1px {
width:100px;
height:100px;
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
.border-1px {
position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-1px:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border-1px:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.333);
transform: scaleY(0.333);
}
}
</style>
</head>
<body>
<!-- <div class="box-shadow-1px">
1px border
</div> -->
<div class="border-1px">
1px border 伪元素
</div>
</body>
</html>主要原理是使用媒体查询，通过伪元素来实现，针对不同的设备 dpr ，进行不同比例的缩放，
例如 dpr 设备像素比=2，说明，1px = 2 个物理像素，所以需要缩小一倍
如果 dpr=3，则 1px=3个物理像素，所以需要同比缩小至 1/3
