【retina】手机上 1PX 边框

1像素边框，在2倍屏幕上为2“占位”，3倍屏上为3“占位”，但设计师就要1“占位”

 1 .content h1:after,
 2 .content h2:after {
 3     border-top: 1px solid #bfbfbf;
 4     content: ‘ ‘;
 5     display: block;
 6     width: 100%;
 7     position: absolute;
 8     left: 0;
 9     bottom: 0;
10     -webkit-transform-origin: left bottom;
11 }
12 /* Retina 适配 */
13 @media only screen and (-webkit-min-device-pixel-ratio: 2.0),
14 only screen and (min--moz-device-pixel-ratio: 2.0),
15 only screen and (-o-min-device-pixel-ratio: 200/100),
16 only screen and (min-device-pixel-ratio: 2.0) {
17     .content h1:after,
18     .content h2:after {
19         -webkit-transform: scaleY(0.5);
20         transform: scaleY(0.5);
21     }
22 }
23
24 /* 三倍屏 适配 */
25 @media only screen and (-webkit-min-device-pixel-ratio: 2.5),
26 only screen and (min--moz-device-pixel-ratio: 2.5),
27 only screen and (-o-min-device-pixel-ratio: 250/100),
28 only screen and (min-device-pixel-ratio: 2.5) {
29     .content h1:after,
30     .content h2:after {
31         -webkit-transform: scaleY(0.33333334);
32         transform: scaleY(0.33333334);
33     }
34 }