css媒体查询

68 阅读1分钟

Date: 2017-04-01

/* iPhone4 */

@media only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {

}
/* iPhone5 */
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
 
}
/* iPhone6、iPhone7、iPhone8 */
@media only screen and (device-height:375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
 
}
/* iPhone6Plus、iPhone7Plus、iPhone8Plus */
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
 
}
/* iPhoneX */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

}
/* iPhoneX */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 
}
/* iPhoneXR */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {

}
/* iPhoneXs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

}
/* iPhoneXs Max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {

}