本文已参与[新人创作礼]活动，一起开启掘金创作之路
1.问题描述
css的1px在PC端就是1px； 在移动端就往往就大于 1px
2.代码示范
<!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>
body {margin:0;padding:19px}
div { padding:1em;margin:1em;}
.box1{border-top: 1px solid #000;}
.box2{border-bottom:1px solid #000;}
</style>
</head>
<body>
<div class="box1">
1px的上边框
</div>
<div class="box2">
0.5px的上边框
</div>
</body>
</html>
3.解决前效果展示
PC端
移动端
是不是明显感觉粗了好多
4.问题产生原因
- 设备像素比：dpr=window.devicePixelRatio，也就是设备的物理像素与逻辑像素的比值。
- 在
retina屏的手机上,dpr为2或3，css里写的1px宽度映射到物理像素上就有2px或3px宽度。 - 例如：
iPhone6的dpr为2，物理像素是750（x轴）,它的逻辑像素为375。也就是说，1个逻辑像素，在x轴和y轴方向，需要2个物理像素来显示，即：dpr=2时，表示1个CSS像素由4个物理像素点组成。
5.解决方案
伪元素 + transform 缩放
<!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>
body {margin:0;padding:19px}
div { padding:1em;margin:1em;}
.box1{border-top: 1px solid #000;}//修改前1px
.box2{position: relative;border-bottom:1px solid #000;}
.box2::after{
content:'';
position: absolute;
left:0;top:0;width: 100%;
height: 1px; //解决box2的1px问题
background-color: #000;
transform: scaleY(0.5);//0.5px实现
}
</style>
</head>
<body>
<div class="box1">
假1px的上边框
</div>
<div class="box2">
0.5px的上边框，真1px的下边框
</div>
</body>
</html>
伪元素::after或::before独立于当前元素，可以单独对其缩放而不影响元素本身的缩放
6.解决后效果展示
移动端
