iPhone X 媒体查询适配

cuieney 发布于2019-08-29 17:25 / 3303人阅读

摘要：适合一英寸的像素总数称为屏幕密度或像素密度，其测量为每英寸像素数。设备大多具有或显示屏，因此您可以使用一般的视网膜媒体查询在所有类型的设备上显示高分辨率内容。

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媒体域名查询

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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