css样式匹配苹果个型号手机

/*适配苹果X*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .header_nav {
        top: 44px;
    }
}

/*适配苹果X smart Max*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .header_nav {
        top: 44px;
    }
}

/*适配苹果XR */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) {
    .header_nav {
        top: 44px;
    }
}

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    .header_nav {
        top: 44px;
    }
}

/*适配,6,7,8*/
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
    
}

/*适配,6+,7+,8+*/
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
   
}

/*适配,5*/
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
   
}

/*适配,4*/
@media only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
 
}

 

css样式匹配苹果个型号手机

上一篇:Android控件ImageView的scaleType图解


下一篇:react_app 项目开发 (5)_前后端分离_后台管理系统_开始