移动端1px细线的处理

时间：2024-01-06 11:45:56
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>利用transform实现1px的细线</title>

	<style type="text/css">

		.line{

			 position: relative;

			 margin-top: 20px;

			 border:none;

		}

		.line:after{

			 content: '';

			 position: absolute;

			 top: 0;

			 left: 0;

			 border-top: 1px solid red;

			 -webkit-box-sizing: border-box;

			 box-sizing: border-box;

			 width: 100%;

			 height: 100%;

			 -webkit-transform: scaleY(0.5);

			 transform: scaleY(0.5);

			 -webkit-transform-origin: left top;

			 transform-origin: left top;

		}

		.line2{

			 position: relative;

			 margin-top: 40px;

			 border:none;

		}

		.line2:after{

			 content: '';

			 position: absolute;

			 top: 0;

			 left: 0;

			 border-bottom: 1px solid red;

			 -webkit-box-sizing: border-box;

			 box-sizing: border-box;

			 width: 100%;

			 height: 100%;

			 -webkit-transform-origin: left top;

			 transform-origin: left top;

		}

	</style>

</head>

<body>

	<div class='line'>1</div>

	<div class='line2'>1</div>

	<script src='js/rem.js'></script>

	<script src="http://127.0.0.1:8082/target/target-script-min.js#anonymous"></script>

</body>

</html>

　　其实是dpi在作怪，现在主流的手机大都是2dpi的，那么一个物理像素会渲染出2px，所以1px的细线就变成了2px，处理方法也很简单。scaleY（0.5）就好。

相关文章