首页 建站教程 正文
我要投稿

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

建站教程
2025-05-29 0 76
也想出现在这里？点击联系我~

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

?

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

Apple iPhone X Min-Height媒体查询

?

1
@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媒体查询

?

1

2

3

4

5

6

7

8

9
@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媒体查询

?

1

2

3

4

5

6

7

8

9
@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媒体查询

?

1

2

3

4

5

6

7

8

9
@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) { }

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

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

快网idc优惠网 建站教程 iPhoneX 媒体查询适配的方法教程 https://www.kuaiidc.com/89161.html

也想出现在这里？点击联系我~

相关文章

ASP.NET自助建站系统中如何实现多语言支持？
ASP.NET自助建站系统中如何实现多语言支持？
建站教程
5个月前 122
64M VPS建站：如何选择最适合的网站建设平台？
64M VPS建站：如何选择最适合的网站建设平台？
建站教程
5个月前 87
ASP.NET本地开发时常见的配置错误及解决方法？
ASP.NET本地开发时常见的配置错误及解决方法？
建站教程
5个月前 178
ASP.NET自助建站系统的数据库备份与恢复操作指南
ASP.NET自助建站系统的数据库备份与恢复操作指南
建站教程
5个月前 89
猜你喜欢
发表评论
暂无评论
TA的动态
快网idc优惠网

idc信息共同学习，共同进步，共同成长！

QQ交流群
快网idc优惠网

QQ交流群

您的支持，是我们最大的动力！
热门文章
热门评论
终身VIP会员限时钜惠
首页 SSL证书 菜单 论坛 问答