iPhoneX 媒體查詢適配的辦法圖文詳細教程_IOS

iPhone X尺寸

• 5.8 英寸
• 5.65 x 2.79 x 0.30 英寸

iPhone X分辨率

• 1125 x 2436
• 每英寸PX~458 像素

屏幕尺寸

Apple iPhone X的屏幕為5.8英寸，約為實際設(shè)備尺寸的82.9％。Apple iPhone X設(shè)備的物理尺寸為5.65 x 2.79 x 0.30英寸或（143.6 x 70.9 x 7.7 MM）。

單位顯示順序為“高x寬x厚”

屏幕像素密度和CSS像素比

“Pixel”是任何顯示器的最小單位/元素。

適合一英寸的像素總數(shù)稱為“屏幕密度”或“像素密度”，其測量為“每英寸像素數(shù)”。
像素深度限制顯示每英寸像素數(shù)取決于不同的屏幕尺寸。當每英寸像素數(shù)增加超過屏幕尺寸限制時，顯示分辨率將增加，但實際設(shè)備寬度/高度（以像素為單位）保持不變。實際設(shè)備像素稱為設(shè)備無關(guān)像素或CSS像素比。

Apple iPhone X的密度約為458像素，實際像素密度約為153，因此它具有 3 xxhdpi的顯示像素密度。

屏幕分辨率和視口

在設(shè)備上顯示的像素總和稱為“屏幕分辨率”。并且任何設(shè)備的實際像素總和被稱為“視口”。

Apple iPhone X的物理屏幕尺寸為5.8英寸，分辨率約為1125 x 2436像素，像素密度約為458 PPI。Apple iPhone X的視口尺寸為375 x 812像素，像素比約為3。

CSS媒體查詢

Apple iPhone X媒體查詢（僅限移動設(shè)備）

Apple iPhone X Min-Width媒體查詢

@media only screen and (min-width: 375px) { /* Your Styles... */ }

Apple iPhone X Min-Height媒體查詢

@media only screen and (min-height: 812px) { /* Your Styles... */ }

Apple iPhone X Landscape媒體查詢

Apple iPhone X Portrait媒體查詢

Apple iPhone X Retina媒體查詢

@media
 only screen and (-webkit-min-device-pixel-ratio: 3),
 only screen and ( min--moz-device-pixel-ratio: 3),
 only screen and (  -o-min-device-pixel-ratio: 3/1),
 only screen and (  min-device-pixel-ratio: 3),
 only screen and (    min-resolution: 458dpi),
 only screen and (    min-resolution: 3dppx) { 
 /* Retina styles here */
}

視網(wǎng)膜實際上是基于設(shè)備像素比率。設(shè)備大多具有2x或3x顯示屏，因此您可以使用一般的視網(wǎng)膜媒體查詢在所有類型的設(shè)備上顯示高分辨率內(nèi)容。Retina 2x和Retina 3x媒體查詢?nèi)缦拢?/p>

Retina 2x媒體查詢

@media
 only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and ( min--moz-device-pixel-ratio: 2),
 only screen and (  -o-min-device-pixel-ratio: 2/1),
 only screen and (  min-device-pixel-ratio: 2),
 only screen and (    min-resolution: 192dpi),
 only screen and (    min-resolution: 2dppx) { 
 /* Retina styles here */
}

Retina 3x媒體查詢

@media
 only screen and (-webkit-min-device-pixel-ratio: 3),
 only screen and ( min--moz-device-pixel-ratio: 3),
 only screen and (  -o-min-device-pixel-ratio: 3/1),
 only screen and (  min-device-pixel-ratio: 3),
 only screen and (    min-resolution: 384dpi),
 only screen and (    min-resolution: 3dppx) { 
 /* Retina styles here */
}

補充：

/* iphone 3 */

/* iphone 4 */

/* iphone 5 */

/* iphone 6, 6s */

/* iphone 7, 8 */

/* iphone 6+, 6s+, 7+, 8+ */

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持本站。