脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → iPhoneX 媒体查询适配

iPhoneX 媒体查询适配的方法教程

 更新时间：2018年11月29日 15:34:44   作者：杭州蘇小小  
这篇文章主要介绍了iPhoneX 媒体查询适配的方法教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

补充：

/* iphone 3 */

复制代码 代码如下:
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

/* iphone 4 */

复制代码 代码如下:
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

/* iphone 5 */

复制代码 代码如下:
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

/* iphone 6, 6s */

复制代码 代码如下:
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

/* iphone 7, 8 */

复制代码 代码如下:
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

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

复制代码 代码如下:
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • iOS swift实现转场动画的方法示例

    iOS swift实现转场动画的方法示例

    在平时的iOS开发中，我们进行界面跳转时一般都是采用系统默认的转场动画，而下面这篇文章主要给大家介绍了关于iOS利用swift实现转场动画的方法示例，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-07-07
  • iOS获取当前连接的wifi信息

    iOS获取当前连接的wifi信息

    这篇文章主要为大家详细介绍了iOS如何获取当前连接的wifi信息，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • IOS获取当前版本号 Bundle ID等信息的方法详解

    IOS获取当前版本号 Bundle ID等信息的方法详解

    这篇文章主要介绍了IOS获取当前版本号 Bundle ID等信息的方法详解的相关资料,需要的朋友可以参考下
    2016-12-12
  • iOS 底层alloc init new 源码流程示例分析

    iOS 底层alloc init new 源码流程示例分析

    这篇文章主要为大家介绍了iOS 底层alloc init new 源码流程示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 如何在IOS上使用ReplayKit与RTC

    如何在IOS上使用ReplayKit与RTC

    这篇文章主要介绍了如何在IOS上使用ReplayKit 与 RTC，对IOS音视频感兴趣的同学，一定要看一下
    2021-04-04
  • 详解Xcode 9 设置 iOS无线真机调试

    详解Xcode 9 设置 iOS无线真机调试

    本篇文章主要介绍了详解Xcode 9 设置 iOS无线真机调试，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • iOS微信分享后关闭发送成功提示并返回应用

    iOS微信分享后关闭发送成功提示并返回应用

    这篇文章主要为大家详细介绍了iOS微信分享后关闭发送成功提示并返回应用的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • iOS实现圆环比例图

    iOS实现圆环比例图

    这篇文章主要为大家详细介绍了iOS实现圆环比例图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • iOS文件预览分享小技能示例

    iOS文件预览分享小技能示例

    这篇文章主要为大家介绍了iOS文件预览分享小技能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • iOS中lebel特殊字符的自动换行问题解决

    iOS中lebel特殊字符的自动换行问题解决

    这篇文章主要给大家介绍了关于iOS中lebel特殊字符的实现不自动换行的相关资料，文中通过示例代码介绍的非常详细，对大家学习iOS具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10

最新评论