实现移动设备Ritina屏下1px

发表于 | 分类于 |

背景

大家应该都知道在ios Ritina高清屏下写1px的边框,实际上是2px,其实情况是devicePixelRatio=2 的时候显示2px, 6P这种的devicePixelRatio=3,实际效果是3px。
解决这种问题的方法很多:
1、ios8以上的支持0.5px
2、淘宝的 vieweport + REM 方法实现, 详细解决方案移驾淘宝m站查看
3、box-shadow、border-image、background-image,详情请自行google
4、transform + after伪类,利用伪类after实现border为1px,在devicePixelRatio == 2时利用transform:scale(.5)缩一半

实现代码

transform + after

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="hair-lines">
    <li>
        <div class="hair-line border-top">上边框</div>
    </li>
    <li>
        <div class="hair-line border-right">右边框</div>
    </li>
    <li>
        <div class="hair-line border-bottom">下边框</div>
    </li>
    <li>
        <div class="hair-line border-left">左边框</div>
    </li>
    <li>
        <div class="hair-line border-full">四条边</div>
    </li>
    <li>
        <div class="hair-line border-circle">圆角</div>
    </li>
</ul>

css

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
.hair-lines li{
    height: 40px;
    line-height: 40px;
    margin: 10px;
    padding: 10px;
    text-align: center;
    list-style: none;
}
.hair-line{
    position: relative;
}
.hair-line:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    pointer-events: none;
}
.border-top:after{
    border-top: 1px solid #d5d5d5;
}
.border-right:after{
    border-right: 1px solid #d5d5d5;
}
.border-bottom:after{
    border-bottom: 1px solid #d5d5d5;
}
.border-left:after{
    border-left: 1px solid #d5d5d5;
}
.border-full:after{
    border: 1px solid #d5d5d5;
}
.border-circle:after{
    border: 1px solid #d5d5d5;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2){
    .hair-line:after {
        right: -100%;
        bottom: -100%;
        transform: scale(0.5);
    }
}

效果

  • 上边框
  • 右边框
  • 下边框
  • 左边框
  • 四条边
  • 圆角