扣丁学堂iOS培训之iPhoneX媒体查询适配的方法教程

2018-11-30 13:26:41 611浏览

今天扣丁学堂iOS培训老师给大家介绍一下关于iPhoneX媒体查询适配的方法教程，希望对同学们iOS开发有所帮助，下面我们一起来看一下吧。

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

适合一英寸的像素总数称为“屏幕密度”或“像素密度”，其测量为“每英寸像素数”。

像素深度限制显示每英寸像素数取决于不同的屏幕尺寸。当每英寸像素数增加超过屏幕尺寸限制时，显示分辨率将增加，但实际设备宽度/高度（以像素为单位）保持不变。实际设备像素称为设备无关像素或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 */
}

视网膜实际上是基于设备像素比率。设备大多具有2x或3x显示屏，因此您可以使用一般的视网膜媒体查询在所有类型的设备上显示高分辨率内容。Retina2x和Retina3x媒体查询如下：

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媒体查询适配的方法教程的全部内容，希望对大家的学习有所帮助，扣丁学堂IT职业在线学习教育平台为您提供权威的iOS开发环境搭建视频，iOS培训后的前景无限，行业薪资和未来的发展会越来越好的，通过千锋扣丁学堂金牌讲师在线录制的iOS开发教程，让你快速掌握iOS从入门到精通开发实战技能。

【关注微信公众号获取更多学习资料】

查看更多关于“iOS开发培训”的相关资讯>>