css3 媒体查询iphone多版本适配

/今日充值做媒体查询兼容/

/*今日充值做媒体查询兼容*/

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
    /* style */
}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
    .tl-recharge{
        position: absolute;
        top:500px;
        width: 100%;
    }
}


@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/*兼容iphone6，iphone7，iphone8s ：*/
    .tl-recharge{
        position: absolute;
        top:594px;
        width: 100%;
    }
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/*兼容iphone6 Plus,iphone7 Plus,iphone8 Plus：*/
    .tl-recharge{
        position: absolute;
        top:650px;
        width: 100%;
    }
}

@media only screen and (device-width: 375px)
and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){/*兼容iphoneX*/
    .tl-recharge{
        position: absolute;
        top:594px;
        width: 100%;
    }
}

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){

/* style */

}@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

.tl-recharge{

position: absolute;

top:500px;

width: 100%;

}

}@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/兼容iphone6，iphone7，iphone8s ：/

.tl-recharge{

position: absolute;

top:594px;

width: 100%;

}

}

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/兼容iphone6 Plus,iphone7 Plus,iphone8 Plus：/

.tl-recharge{

position: absolute;

top:650px;

width: 100%;

}

}@media only screen and (device-width: 375px)

and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){/兼容iphoneX/

.tl-recharge{

position: absolute;

top:594px;

width: 100%;

}

}