iPhone X 媒体查询适配

2020-05-30 14:02:43 阅读：426 来源： 互联网

标签：ratio min 适配 screen 查询 only iPhone 像素

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

标签：ratio,min,适配,screen,查询,only,iPhone,像素
来源： https://www.cnblogs.com/baimeishaoxia/p/12992344.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

iPhone X 媒体查询适配

屏幕尺寸

屏幕像素密度和CSS像素比

屏幕分辨率和视口

CSS媒体查询