移动端1px细线的处理

最新推荐文章于 2025-06-11 22:30:32 发布

weixin_30348519

最新推荐文章于 2025-06-11 22:30:32 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web-alibaba/p/4841030.html

<!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）就好。

转载于:https://www.cnblogs.com/web-alibaba/p/4841030.html