Home >Web Front-end >HTML Tutorial >【retina】手机上 1PX 边框_html/css_WEB-ITnose

【retina】手机上 1PX 边框_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:36:451275browse

 

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 }

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn