面试官【说一下移动端1px的解决方案】

前言

hello world欢迎来到前端的新世界

---

😜当前文章系列专栏：前端系列文章
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

使用伪类和transform

.hairline {
  position: relative;
}
.hairline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 1px solid #000;
  transform: scaleY(0.5);
}

1
2
3
4
5
6
7
8
9
10
11
12
13

使用border-image

使用border-image属性来创建一个渐变的边框效果，从而可以实现1像素的边框线条。

/* CSS样式 */
.border-1px {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #000 0%, #000 100%);
}

1
2
3
4
5
6
7

使用box-shadow

通过设置box-shadow属性的模糊半径为0，可以实现一个1像素的阴影效果，从而达到1像素边框的视觉效果。

/* CSS样式 */
.shadow-1px {
  box-shadow: 0 0 0 1px #000;
}

1
2
3
4
5

使用媒体查询及scale

通过结合媒体查询以及CSS3的transform: scaleY属性，可以根据设备像素比例对1px元素进行缩放，以便在高清屏幕上显示清晰的1像素线条。

/* CSS样式 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .scale-1px {
    position: relative;
  }
  .scale-1px::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #000;
    transform: scaleY(0.5);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用viewport单位

可以使用vw（视窗宽度的百分比）或vh（视窗高度的百分比）单位来代替像素单位，在一定程度上解决高清屏幕下1px显示模糊的问题。

使用图片或SVG

对于边框或分隔线等特别细的元素，可以考虑使用图片或SVG来代替纯CSS的绘制。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力