【移动端适配】适配1个像素的border 

 1 .b-top,.b-btm {
 2     position:relative;
 3 }
 4     .b-top:before {
 5         content:' ';
 6         display:block;
 7         width:100%;
 8         position:absolute;
 9         left:0;
10         top:0;
11         border-top:1px solid #e7e7e7;
12         -webkit-transform-origin:left top;
13     }
14     .b-btm:after {
15         content:' ';
16         display:block;
17         width:100%;
18         position:absolute;
19         left:0;
20         bottom:0;
21         border-bottom:1px solid #e7e7e7;
22         -webkit-transform-origin:left bottom;
23     }
24 
25     /* Retina 适配 */
26 
27 @media only screen and (-webkit-min-device-pixel-ratio: 2.0),
28 only screen and (min--moz-device-pixel-ratio: 2.0),
29 only screen and (-o-min-device-pixel-ratio: 200/100),
30 only screen and (min-device-pixel-ratio: 2.0) {
31     .b-top:before,.b-btm:after {
32         -webkit-transform: scaleY(0.5);
33         transform: scaleY(0.5);
34     }
35 }
36 
37 /* 三倍屏 适配 */
38 
39 @media only screen and (-webkit-min-device-pixel-ratio: 2.5),
40 only screen and (min--moz-device-pixel-ratio: 2.5),
41 only screen and (-o-min-device-pixel-ratio: 250/100),
42 only screen and (min-device-pixel-ratio: 2.5) {
43    .b-top:before,.b-btm:after{
44         -webkit-transform: scaleY(0.33333334);
45         transform: scaleY(0.33333334);
46     }
47 }

 

posted @ 2016-08-02 09:31  Mr.攻城师  阅读(217)  评论(0)    收藏  举报