iPhone X 媒體查詢適配

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媒體查詢（僅限移動設備）

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

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媒體查詢

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

Apple iPhone X Portrait媒體查詢

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

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 */
}

視網膜其實是基於設備像素比率。設備大多具備2x或3x顯示屏，所以您能夠使用通常的視網膜媒體查詢在全部類型的設備上顯示高分辨率內容。Retina 2x和Retina 3x媒體查詢以下：

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 */
}