iPhone X尺寸
- 5.8 英寸
- 5.65 x 2.79 x 0.30 英寸
iPhone X分辨率
- 1125 x 2436
- 每英寸PX~458 像素
屏幕尺寸
Apple iPhone X的屏幕為5.8英寸，約為實際設備尺寸的82.9％。Apple iPhone X設備的物理尺寸為5.65 x 2.79 x 0.30英寸或（143.6 x 70.9 x 7.7 MM）。
單位顯示順序為“高x寬x厚”
屏幕像素密度和CSS像素比
“Pixel”是任何顯示器的最小單位/元素。
適合一英寸的像素總數稱為“屏幕密度”或“像素密度”，其測量為“每英寸像素數”。
像素深度限制顯示每英寸像素數取決于不同的屏幕尺寸。當每英寸像素數增加超過屏幕尺寸限制時，顯示分辨率將增加，但實際設備寬度/高度（以像素為單位）保持不變。實際設備像素稱為設備無關像素或CSS像素比。
Apple iPhone X的密度約為458像素，實際像素密度約為153，因此它具有 3 xxhdpi的顯示像素密度。
屏幕分辨率和視口
在設備上顯示的像素總和稱為“屏幕分辨率”。并且任何設備的實際像素總和被稱為“視口”。
Apple iPhone X的物理屏幕尺寸為5.8英寸，分辨率約為1125 x 2436像素，像素密度約為458 PPI。Apple iPhone X的視口尺寸為375 x 812像素，像素比約為3。
CSS媒體查詢
Apple iPhone X媒體查詢（僅限移動設備）
Apple iPhone X Min-Width媒體查詢
|
1
|
@media only screen and (min-width: 375px) { /* Your Styles... */ } |
Apple iPhone X Min-Height媒體查詢
|
1
|
@media only screen and (min-height: 812px) { /* Your Styles... */ } |
Apple iPhone X Landscape媒體查詢
Apple iPhone X Portrait媒體查詢
Apple iPhone X Retina媒體查詢
|
1
2
3
4
5
6
7
8
9
|
@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 */} |
視網膜實際上是基于設備像素比率。設備大多具有2x或3x顯示屏，因此您可以使用一般的視網膜媒體查詢在所有類型的設備上顯示高分辨率內容。Retina 2x和Retina 3x媒體查詢如下：
Retina 2x媒體查詢
|
1
2
3
4
5
6
7
8
9
|
@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媒體查詢
|
1
2
3
4
5
6
7
8
9
|
@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+ */
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://segmentfault.com/a/1190000017188158
