iPhoneX 媒体查询适配的方法教程
iPhoneX尺寸
- 5.8英寸
- 5.65x2.79x0.30英寸
iPhoneX分辨率
- 1125x2436
- 每英寸PX~458像素
屏幕尺寸
AppleiPhoneX的屏幕为5.8英寸，约为实际设备尺寸的82.9％。AppleiPhoneX设备的物理尺寸为5.65x2.79x0.30英寸或（143.6x70.9x7.7MM）。
单位显示顺序为“高x宽x厚”
屏幕像素密度和CSS像素比
“Pixel”是任何显示器的最小单位/元素。
适合一英寸的像素总数称为“屏幕密度”或“像素密度”，其测量为“每英寸像素数”。
像素深度限制显示每英寸像素数取决于不同的屏幕尺寸。当每英寸像素数增加超过屏幕尺寸限制时，显示分辨率将增加，但实际设备宽度/高度（以像素为单位）保持不变。实际设备像素称为设备无关像素或CSS像素比。
AppleiPhoneX的密度约为458像素，实际像素密度约为153，因此它具有3xxhdpi的显示像素密度。
屏幕分辨率和视口
在设备上显示的像素总和称为“屏幕分辨率”。并且任何设备的实际像素总和被称为“视口”。
AppleiPhoneX的物理屏幕尺寸为5.8英寸，分辨率约为1125x2436像素，像素密度约为458PPI。AppleiPhoneX的视口尺寸为375x812像素，像素比约为3。
CSS媒体查询
AppleiPhoneX媒体查询（仅限移动设备）
@mediaonlyscreenand(min-width:375px)and(max-width:767px){/*YourStyles...*/}AppleiPhoneXMin-Width媒体查询
@mediaonlyscreenand(min-width:375px){/*YourStyles...*/}
AppleiPhoneXMin-Height媒体查询
@mediaonlyscreenand(min-height:812px){/*YourStyles...*/}
AppleiPhoneXLandscape媒体查询
@mediaonlyscreenand(min-width:812px)and(orientation:landscape){/*YourStyles...*/}AppleiPhoneXPortrait媒体查询
@mediaonlyscreenand(min-width:375px)and(orientation:portrait){/*YourStyles...*/}AppleiPhoneXRetina媒体查询
@media
onlyscreenand(-webkit-min-device-pixel-ratio:3),
onlyscreenand(min--moz-device-pixel-ratio:3),
onlyscreenand(-o-min-device-pixel-ratio:3/1),
onlyscreenand(min-device-pixel-ratio:3),
onlyscreenand(min-resolution:458dpi),
onlyscreenand(min-resolution:3dppx){
/*Retinastyleshere*/
}
视网膜实际上是基于设备像素比率。设备大多具有2x或3x显示屏，因此您可以使用一般的视网膜媒体查询在所有类型的设备上显示高分辨率内容。Retina2x和Retina3x媒体查询如下：
Retina2x媒体查询
@media
onlyscreenand(-webkit-min-device-pixel-ratio:2),
onlyscreenand(min--moz-device-pixel-ratio:2),
onlyscreenand(-o-min-device-pixel-ratio:2/1),
onlyscreenand(min-device-pixel-ratio:2),
onlyscreenand(min-resolution:192dpi),
onlyscreenand(min-resolution:2dppx){
/*Retinastyleshere*/
}
Retina3x媒体查询
@media
onlyscreenand(-webkit-min-device-pixel-ratio:3),
onlyscreenand(min--moz-device-pixel-ratio:3),
onlyscreenand(-o-min-device-pixel-ratio:3/1),
onlyscreenand(min-device-pixel-ratio:3),
onlyscreenand(min-resolution:384dpi),
onlyscreenand(min-resolution:3dppx){
/*Retinastyleshere*/
}
补充：
/*iphone3*/
@mediaonlyscreenand(min-device-width:320px)and(max-device-height:480px)and(-webkit-device-pixel-ratio:1){}
/*iphone4*/
@mediaonlyscreenand(min-device-width:320px)and(max-device-height:480px)and(-webkit-device-pixel-ratio:2){}
/*iphone5*/
@mediaonlyscreenand(min-device-width:320px)and(max-device-height:568px)and(-webkit-device-pixel-ratio:2){}
/*iphone6,6s*/
@mediaonlyscreenand(min-device-width:375px)and(max-device-height:667px)and(-webkit-device-pixel-ratio:2){}
/*iphone7,8*/
@mediaonlyscreenand(min-device-width:375px)and(max-device-height:667px)and(-webkit-device-pixel-ratio:2){}
/*iphone6+,6s+,7+,8+*/
@mediaonlyscreenand(min-device-width:414px)and(max-device-height:736px)and(-webkit-device-pixel-ratio:3){}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。