因为移动端设备 dpr (物理像素)的缘故，导致 1px 在移动端会变成 2px 的情况，可以通过 伪类 + 缩放 来解决 1px 的问题。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>1px</title>
<style type="text/css">
.bottom-1px, .top-1px {
position: relative
}
.bottom-1px:after, .top-1px:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
border-top: 1px solid #efefef;
content: ''
}
.top-1px:before {
top: 0;
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
/**
* 1.5*0.666
*/
.bottom-1px:after, .top-1px:before {
-webkit-transform: scaleY(0.666);
transform: scaleY(0.666)
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
/**
* 2*0.5
*/
.bottom-1px:after, .top-1px:before {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5)
}
}
</style>
</head>
<body>
<div class="bottom-1px">
aaaaa
</div>
<div>bbbbb</div>
<div class="top-1px">
ccccc
</div>
</body>
</html>
网友评论