<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
.border{
position: relative;
}
.border::after{
display: block;
position: absolute;
left: 0;
bottom: 0;
100%;
border-top:1px solid rgba(7,17,27,0.1);
content: " ";
}
@meta (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
.border-1px::after{
-webkit-transform: scaleY(0.7);
transform:scaleY(0.7)
}
}
@meta (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
.border-1px::after{
-webkit-transform: scaleY(0.5);
transform:scaleY(0.5)
}
}
</style>
</head>
<body>
1px像素的实现
<div class="border border-1px">
</div>
</body>
</html>
利用meta判断设备像素是dpr的值来，缩放对应的比例