欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學堂iOS培訓之iPhoneX媒體查詢適配的方法教程

2018-11-30 13:26:41 2155瀏覽

今天扣丁學堂iOS培訓老師給大家介紹一下關于iPhoneX媒體查詢適配的方法教程，希望對同學們iOS開發(fā)有所幫助，下面我們一起來看一下吧。

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”是任何顯示器的最小單位/元素。

適合一英寸的像素總數(shù)稱為“屏幕密度”或“像素密度”，其測量為“每英寸像素數(shù)”。

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

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

屏幕分辨率和視口

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

AppleiPhoneX的物理屏幕尺寸為5.8英寸，分辨率約為1125x2436像素，像素密度約為458PPI。AppleiPhoneX的視口尺寸為375x812像素，像素比約為3。

CSS媒體查詢

AppleiPhoneX媒體查詢（僅限移動設備）

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

AppleiPhoneXMin-Width媒體查詢

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

AppleiPhoneXMin-Height媒體查詢

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

AppleiPhoneXLandscape媒體查詢

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

AppleiPhoneXPortrait媒體查詢

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

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

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

Retina3x媒體查詢

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

補充：

/*iphone3*/

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

/*iphone4*/

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

/*iphone5*/

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

/*iphone6,6s*/

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

/*iphone7,8*/

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

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

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

以上就是關于扣丁學堂iOS培訓之iPhoneX媒體查詢適配的方法教程的全部內(nèi)容，希望對大家的學習有所幫助，扣丁學堂IT職業(yè)在線學習教育平臺為您提供權威的iOS開發(fā)環(huán)境搭建視頻，iOS培訓后的前景無限，行業(yè)薪資和未來的發(fā)展會越來越好的，通過千鋒扣丁學堂金牌講師在線錄制的iOS開發(fā)教程，讓你快速掌握iOS從入門到精通開發(fā)實戰(zhàn)技能。

【關注微信公眾號獲取更多學習資料】

查看更多關于“iOS開發(fā)培訓”的相關資訊>>