个人技术分享

承蒙眷顾，不胜惶恐

关于移动端实现border:1px的解决方案

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 2.8k 阅读时长 ≈ 3 分钟

关于移动端border-1px问题由来，我想大家都应该很清楚了。简言之，是由不同手机的物理像素密度不同导致的。不同设备的由于设备像素比的不同，渲染出来的实际效果大不相同。首先，了解下设备像素比。

1
devicePixelRatio = 屏幕物理像素/独立像素

如何实现1像素的border呢？

1、利用device-pixel-ratio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//元素正常设置border，增加一个类border-1px

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
    .border-1px{
        &::after{
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          border: 1px solid #ddd;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 200%;
          height: 200%;
          -webkit-transform: scale(0.7);
          transform: scale(0.7);
          -webkit-transform-origin: left top;
          transform-origin: left top;
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2){
  	.border-1px{
        &::after{
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          border: 1px solid #ddd;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 200%;
          height: 200%;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          -webkit-transform-origin: left top;
          transform-origin: left top;
        }
    }
}

另外一种实现方案：
devicePixelRatio = 2

1
2
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

devicePixelRatio = 3

1
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

2、使用box-shadow

1
box-shadow: inset 1px -1px 1px -1px #fff,inset -1px 1px 1px -1px #fff;

优点：满足所有场景，包括圆角，代码量少。
缺点：边框有阴影，颜色变浅。

3、使用伪类+transform 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//单条border
.border-1px{
	position: relative;
	&:after{
		content: '';
	    display: block;
	    position: absolute;
	    width: 100%;
	    left: 0;
	    bottom: 0;
	    height: 1px;
	    background-color: #e5e5e5;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	}
}
//四条border
.border-1px{
	position: relative;
	&:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        //-webkit-transform-origin: left top;
        //transform-origin: left top;
    }
}

优点：所有场景都满足，支持圆角（伪类和本类都需要加border-radius）
缺点：对于已经使用伪类的元素，可能需要多层嵌套

4、利用背景渐变

1
2
3
4
5
6
7
8
9
10
11
12
.background-gradient-1px {
	background:
		linear-gradient(180deg, #fff, #fff 50%, transparent 50%) top    left  / 100% 1px no-repeat,
		linear-gradient(90deg,  #fff, #fff 50%, transparent 50%) top    right / 1px 100% no-repeat,
		linear-gradient(0,      #fff, #fff 50%, transparent 50%) bottom right / 100% 1px no-repeat,
		linear-gradient(-90deg, #fff, #fff 50%, transparent 50%) bottom left  / 1px 100% no-repeat;
}
/* 或者 */
.background-gradient-1px{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #fff), to(#fff)) left bottom repeat-x;
	background-size: 100% 1px;
}

优点：可以实现单条、多条边框，颜色可随意设置
缺点：代码量大，圆角无法实现，兼容性问题