【retina】手机上 1PX 边框

当前位置 : 首页 > 网页制作 > html5 > 【retina】手机上 1PX 边框

【retina】手机上 1PX 边框

来源:互联网 作者:脚本宝典 时间:2015-09-17 12:53
1像素边框,在2倍屏幕上为2“占位”,3倍屏上为3“占位”,但设计师就要1“占位”.contenth1:after,.contenth2:after{border-top:1pxsolid#bfbfbf;content:;display:block;width:100%;position:absolute;left:0;bottom:0;
1像素边框,在2倍屏幕上为2“占位”,3倍屏上为3“占位”,但设计师就要1“占位”
.content h1:after,
.content h2:after {
    border-top: 1px solid #bfbfbf;
    content: ' ';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: left bottom;
}
/* Retina 适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 三倍屏 适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.33333334);
        transform: scaleY(0.33333334);
    }
}


Tag:

相关文章

网友评论

<