【retina】携帯電話の1PX border_html/css_WEB-ITnose

1 ピクセルの境界線は、2x 画面では 2 つの「プレースホルダー」、3x 画面では 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 }