0
点赞
收藏
分享

微信扫一扫

css3 媒体查询iphone多版本适配

曾宝月 2022-07-14 阅读 61

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

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

@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%;

}

}


举报

相关推荐

0 条评论