css中的1px以及图片模糊
wǎng luò shí huāng 2021-06-15
1px
图片模糊
1px问题以及解决；图片模糊问题
# 什么叫物理像素值，什么叫设备独立像素值（dips）?
- https://www.zhihu.com/question/26653449
- https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
- https://github.com/zhangwellyear/font-end/blob/a47bef37c1ec82fe04f33278367a5395e0d44d96/090.%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%80%82%E9%85%8D%E4%B9%8B%E5%BF%85%E5%A4%87%E7%9F%A5%E8%AF%86%E7%82%B9.md
# 解决版办法
- https://github.com/Coderhyp/Notebyhyp/blob/8c099292612c291fb8e71f95335ea26edcc650f3/css/05-retina%E5%B1%8F%E5%B9%951px%E8%BE%B9%E6%A1%86%E9%97%AE%E9%A2%98.md
- 我们最常用的是最好一个种方法。
- ：解决方法：不同的设备像素比，设置不同伪元素的宽高后再使缩小。
- 我们在小米的官网上m.mi.com的css里可以看见做法：
.bd-bottom-1px,.bd-left-1px,.bd-right-1px,.bd-top-1px {
position: relative
}
.bd-bottom-1px:after,.bd-bottom-1px:before,.bd-left-1px:after,.bd-left-1px:before,.bd-right-1px:after,.bd-right-1px:before,.bd-top-1px:after,.bd-top-1px:before {
content: "";
display: block;
position: absolute;
transform-origin: 0 0
}
.bd-top-1px:before {
border-top: 1px solid #d9d9d9;
left: 0;
top: 0;
width: 100%;
transform-origin: 0 top
}
.bd-right-1px:after {
border-right: 1px solid #d9d9d9;
top: 0;
right: 0;
height: 100%;
transform-origin: right 0
}
.bd-bottom-1px:after {
border-bottom: 1px solid #d9d9d9;
left: 0;
bottom: 0;
width: 100%;
transform-origin: 0 bottom
}
.bd-left-1px:before {
border-left: 1px solid #d9d9d9;
top: 0;
left: 0;
height: 100%;
transform-origin: left 0
}
@media (min-resolution: 2dppx) {
.bd-top-1px:before {
width:200%;
transform: scale(.5) translateZ(0)
}
.bd-right-1px:after {
height: 200%;
transform: scale(.5) translateZ(0)
}
.bd-bottom-1px:after {
width: 200%;
transform: scale(.5) translateZ(0)
}
.bd-left-1px:before {
height: 200%;
transform: scale(.5) translateZ(0)
}
.border-1px:before {
content: ""
}
}
@media (min-resolution: 3dppx) {
.bd-top-1px:before {
width:300%;
transform: scale(.333) translateZ(0)
}
.bd-right-1px:after {
height: 300%;
transform: scale(.333) translateZ(0)
}
.bd-bottom-1px:after {
width: 300%;
transform: scale(.333) translateZ(0)
}
.bd-left-1px:before {
height: 300%;
transform: scale(.333) translateZ(0)
}
.border-1px:before {
content: ""
}
}
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
# 高分屏其他问题
- 由于retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设备。
# 图片在高分屏下模糊的问题
- https://github.com/zhangwellyear/font-end/blob/a47bef37c1ec82fe04f33278367a5395e0d44d96/090.%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%80%82%E9%85%8D%E4%B9%8B%E5%BF%85%E5%A4%87%E7%9F%A5%E8%AF%86%E7%82%B9.md#6-%E5%9B%BE%E7%89%87%E6%A8%A1%E7%B3%8A%E9%97%AE%E9%A2%98
- 主要用第一种方案
# 适配iphoneX的适配
- https://github.com/zhangwellyear/font-end/blob/a47bef37c1ec82fe04f33278367a5395e0d44d96/090.%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%80%82%E9%85%8D%E4%B9%8B%E5%BF%85%E5%A4%87%E7%9F%A5%E8%AF%86%E7%82%B9.md#4-%E9%80%82%E9%85%8Diphonex
