移动端1px细线的处理

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用transform实现1px的细线</title>
    <style type="text/css">
        .line{
             position: relative;    
             margin-top: 20px;    
             border:none;
        }
        .line:after{
             content: '';    
             position: absolute;    
             top: 0;    
             left: 0;    
             border-top: 1px solid red;    
             -webkit-box-sizing: border-box;    
             box-sizing: border-box;    
             width: 100%;
             height: 100%;    
             -webkit-transform: scaleY(0.5);    
             transform: scaleY(0.5);    
             -webkit-transform-origin: left top;    
             transform-origin: left top;
        }
        .line2{
             position: relative;    
             margin-top: 40px;    
             border:none;
        }
        .line2:after{
             content: '';    
             position: absolute;    
             top: 0;    
             left: 0;    
             border-bottom: 1px solid red;    
             -webkit-box-sizing: border-box;    
             box-sizing: border-box;    
             width: 100%;
             height: 100%;         
             -webkit-transform-origin: left top;    
             transform-origin: left top;
        }
    </style>
</head>
<body>
    <div class='line'>1</div>
    <div class='line2'>1</div>
    <script src='js/rem.js'></script>
    <script src="http://127.0.0.1:8082/target/target-script-min.js#anonymous"></script>
</body>
</html>

  其实是dpi在作怪,现在主流的手机大都是2dpi的,那么一个物理像素会渲染出2px,所以1px的细线就变成了2px,处理方法也很简单。scaleY(0.5)就好。

posted @   小菜鸡12315  阅读(251)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示