iPhone X 媒體查詢適配

cuieney 發布于2019-08-29 17:25 / 3305人閱讀

摘要：適合一英寸的像素總數稱為屏幕密度或像素密度，其測量為每英寸像素數。設備大多具有或顯示屏，因此您可以使用一般的視網膜媒體查詢在所有類型的設備上顯示高分辨率內容。

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

GPU云服務器云服務器媒體域名查詢中文媒體域名查詢英文媒體域名查詢 tv媒體域名查詢

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114307.html

rem兩三事

摘要：昨天被問到關于的問題，當時一臉懵逼，因為寫了兩年，基本沒怎么碰過，有點迷糊。缺點無縮放，且針對的屏沒有做適配，導致對一些手機的適配不是很到位。缺點需要根據設計稿進行基準值換算，在不使用編輯器插件開發時，單位計算復雜。 os：昨天被問到關于rem的問題，當時一臉懵逼，因為寫了兩年js，基本沒怎么碰過css，有點迷糊。 px、em、rem區別不同于px這個固定單位，em和rem都是相對單...

Alliot 2019-08-29 18:41 評論0 收藏0
webApp 頁面布局

摘要：流式布局概念流式布局是頁面元素寬度按照屏幕分辨率進行適配調整，但是整體布局不變。有些手機頁面的寬度會被拉伸，但是高度不變，很不協調。弊端全局縮放，可能會造成出錯。這兩者適合在大項目中，因為可以配合或是，不適合單頁面。 1. 流式布局概念：流式布局是頁面元素寬度按照屏幕分辨率進行適配調整，但是整體布局不變。設計方法：布局都是通過百分比來定義寬度，但是高度大都是用px固定的。弊端：...

JasonZhang 2019-08-29 15:12 評論0 收藏0
webApp 頁面布局

摘要：流式布局概念流式布局是頁面元素寬度按照屏幕分辨率進行適配調整，但是整體布局不變。有些手機頁面的寬度會被拉伸，但是高度不變，很不協調。弊端全局縮放，可能會造成出錯。這兩者適合在大項目中，因為可以配合或是，不適合單頁面。 1. 流式布局概念：流式布局是頁面元素寬度按照屏幕分辨率進行適配調整，但是整體布局不變。設計方法：布局都是通過百分比來定義寬度，但是高度大都是用px固定的。弊端：...

GitChat 2019-08-02 10:18 評論0 收藏0
移動端web app自適應布局探索與總結

摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

Benedict Evans 2019-08-21 10:44 評論0 收藏0
移動端web app自適應布局探索與總結

摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

wangjuntytl 2019-08-28 18:21 評論0 收藏0