文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-05-18 01:02

关注

iPhone X尺寸

iPhone X分辨率

屏幕尺寸

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

Apple iPhone X Min-Width媒体查询


@media only screen and (min-width: 375px) {  }

Apple iPhone X Min-Height媒体查询


@media only screen and (min-height: 812px) {  }

Apple iPhone X Landscape媒体查询

@media only screen and (min-width: 812px) and (orientation: landscape) { }

Apple iPhone X Portrait媒体查询

@media only screen and (min-width: 375px) and (orientation: portrait) { }

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

视网膜实际上是基于设备像素比率。设备大多具有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 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) { 
 
}

补充:

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯