移动端1px边框

最新推荐文章于 2022-08-03 20:36:37 发布

吞石鱼

最新推荐文章于 2022-08-03 20:36:37 发布

阅读量178

点赞数

文章标签： 1px边框移动端

本文链接：https://blog.csdn.net/qq_38735649/article/details/82748584

版权

目的：dpr为2或3时，即iphone6/7/8或iphone 6p的不同设备下，元素边框都为1px。
实现思路：border用伪元素实现，当dpr=2时，通过scaleY=0.5实现边框为1px的效果
代码如下：

html内容

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

css内容

* {
  padding: 0;
  margin: 0;
}
#box {
  width: 300px;
  height: 300px;
  position: relative;
}
#box:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #000;
}
@media only screen and (-webkit-device-pixel-ratio: 2) {
  #box:before {
    transform: scaleY(0.5);
  }
}
@media only screen and (-webkit-device-pixel-ratio: 3) {
  #box:before {
    transform: scaleY(0.333);
  }
}