移动端H5页面中1px边框的解决办法

我乃小神神

发布于 2021-12-07 13:49:13

6390

发布于 2021-12-07 13:49:13

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
		<title>移动端1px边框问题</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			li {
				list-style: none;
			}

			.lines {
				width: 200px;
				margin: 0 auto;
			}

			.lines li {
				border: 1px solid #cccccc;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius: 13px;
				margin-top: 10px;
			}

			.hairlines {
				width: 200px;
				margin: 0 auto;
				border-radius: 3px;
			}

			.hairlines li {
				height: 50px;
				line-height: 50px;
				border: none;
				text-align: center;
				position: relative;
				margin-top: 10px;
			}

			.hairlines li:after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				border: 1px solid #cccccc;
				border-radius: 26px;
				width: 200%;
				height: 200%;
				transform: scale(0.5);
				transform-origin: left top
			}
		</style>
	</head>
	<body>
		粗线
		<ul class="lines">
			<li>1</li>
			<li>2</li>
		</ul>
		细线
		<ul class="hairlines">
			<li>3</li>
			<li>4</li>
		</ul>
	</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/03/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

border