移动端1像素边框解决方法

移动端1像素边框解决方法

移动端 css 中明明就定义的 1px,但是浏览器打开实际看起来要比设计稿中的 1px 粗?
因为 css 中的 1px 并不等于移动设备的 1px,由于不同的手机有不同的像素密度,如 retain屏 。

devicePixelRatio 设备物理像素和设备独立像素的比列,

  • devicePixelRatio = 设备物理像素 / 设备独立像素
  • window.devicePixelRatio

解决方案

  1. 伪类 + transform

不直接设置元素的 border ,利用伪类 :before 或者 :after 模拟 1px 的边框,并将 transform 的 scale 缩小一般。

缺点: 占用伪类

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 1px
@mixin one-left($color:#E3E5E9, $type:solid) {
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px $type $color;
color: $color;
transform-origin: 0 0;
transform: scaleX(0.5);
}
}

@mixin one-right($color:#E3E5E9, $type:solid) {
&:after {
content: " ";
position: absolute;
right: 0;
top: 0;
width: 1px;
bottom: 0;
border-right: 1px $type $color;
color: $color;
transform-origin: 100% 0;
transform: scaleX(0.5);
}
}

@mixin one-top($color:#E3E5E9, $type:solid) {
&:before {
content: " ";
position: absolute;
left: 0;
top: -1px;
right: 0;
height: 1px;
border-top: 1px $type $color;
color: $color;
transform-origin: 0 0;
transform: scaleY(0.5);
}
}

@mixin one-bottom($color:#E3E5E9, $type:solid) {
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px $type $color;
color: $color;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
}

@mixin one-border($color:#E3E5E9, $type:solid, $radius:0) {
&:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
border: 1px $type $color;
border-radius: $radius;
transform: translate(-50%, -50%) scale(.5);
}
}
  1. box-shadow 模拟边框
1
2
3
4
.box {
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: inset 0 -1px 1px -1px black;
}
# CSS

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×