个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
34
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章iPhoneX 媒体查询适配的方法教程由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
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媒体查询（仅限移动设备） 。
。
。
。
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媒体查询 。
。
。
。
Apple iPhone X Portrait媒体查询 。
。
。
。
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:
458
dpi),
only
screen
and ( min-resolution:
3
dppx) {
/* 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:
192
dpi),
only
screen
and ( min-resolution:
2
dppx) {
/* 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:
384
dpi),
only
screen
and ( min-resolution:
3
dppx) {
/* Retina styles here */
}
|
补充:
/* iphone 3 */ 。
。
。
/* iphone 4 */ 。
。
。
/* iphone 5 */ 。
。
。
/* iphone 6, 6s */ 。
。
。
/* iphone 7, 8 */ 。
。
。
/* iphone 6+, 6s+, 7+, 8+ */ 。
。
。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.
原文链接：https://segmentfault.com/a/1190000017188158 。
最后此篇关于iPhoneX 媒体查询适配的方法教程的文章就讲到这里了,如果你想了解更多关于iPhoneX 媒体查询适配的方法教程的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
34
4
0
iPhone X尺寸 5.8 英寸 5.65 x 2.79 x 0.30 英寸 iPhone X分辨率 1125 x 2436 每英寸PX~458 像素 屏幕尺寸
前言 与以往的iphone不同，这次iphone x用上了时下流行的全面屏设计，屏幕的分辨率和比例都是苹果首次采用，而且还有个“别致的刘海”，这就需要现有的app为iphone x重新作适配了。
和往常一样，苹果发布新产品，我们作为开发者都需要对系统和UI布局进行适配，今年也是一样。从去年发布的 iphoneX开始，iPhone 手机加入了刘海设计，而且针对于iphone的刘海，需要特殊的适
当我隐藏我的状态栏时: UIApplication.shared.isStatusBarHidden = true 我的其他 View 向上移动，因为状态栏消失了。这很奇怪，因为通常当您将 View
信息.plist UIViewControllerBasedStatusBarAppearance 界面 View Controller override var prefersStatus
使用 Xcode 版本 9.0 (9A235)，我正在尝试以请求的 2436px × 1125px(横向)为 iPhoneX 添加启动图像。目前我正在使用 Storyboard，它看起来像这样: 'l
我找不到在 iPhoneX 中显示 AVPlayerViewController 控件的解决方案。通过使用 AVPlayerViewController.gravity = .aspectfill 显
我想实现在用户拖动 .drag 元素时根据拖动值平滑折叠灰色 .content-wrapper block (内部有蓝色正方形)的功能。现在移动触摸拖动最好和最有效的方法是什么？ * { box-
我在 UIViewController 中制作了自定义相机，但无法在 iPhoneX 上的整个屏幕上预览相机输出。相机 View 和屏幕边缘之间似乎有很大的填充。我的视野似乎确实是从安全区域插入的。请
大家好， 我们的网站存在严重问题，该网站的着陆页上有 html5 视频。这是一个静音自动播放 5 秒循环，应该作为网站上的背景视频播放。 现在……我们有两个人使用完全相同的设备进行测试。配备 Goog
当我在 iPhone X 模拟器上运行我的应用程序时，它按照设计运行，没有错误。 当我在 iPhone 5S、7 和所有其他非 iPhone X 设备上运行它时，我收到一条错误消息:null is n
我有一个 UIScrollView 是 view.topAnchor 的约束，所以它向上滚动到 iPhoneX 的顶部边缘。但是，当我将内容添加到 scrollView(例如 UIImage)并对其进
我几乎完成了 ios 游戏的开发。一开始我并没有计划支持 iPhoneX，但看起来我也会从新的 xs 开始切断很大一部分用户。不幸的是，我一开始选择了 ipad 尺寸作为标准尺寸，现在我不确定如何处理
在我看来，我这样做是为了弹跳效果。我有一个 UIViewController，我在其中放置 ScrollView ，并在 ScrollView 中放置内容 View (UIView)。我在内容 Vie
我有一个案例，我不想在我的应用程序中使用应用栏，问题是如果我删除应用栏，状态栏将以默认颜色出现，并且脚手架中没有属性来更新状态栏颜色，那里是不是包裹Body in safe 是没有效果状态栏总是停留
我有一个水平分页 UIScrollview ，以下是我对前导/尾随的 VFL 约束 H:|-0-[ScrollView]-0-| (与 super View 对齐)。 我有左/右 safeAreaIn
我们使用 Storyboard来设置我们的 UITabBarController，但使用 UITabBarController 的 loadView() 中的标签过滤相关的 ViewControlle
iPhoneX 的不寻常底角是 Apple 的新(2017 年)“iPhoneX 的连续角”。 对于任何有经验的 iOS 程序员来说近似曲线是微不足道的，但是: 有没有人确切地知道如何实现这些，就像
我正在尝试在 iPhoneX 上同时运行 ARWorldTracking Session 和 ARFaceTracking Session， 但第一个运行的 session 在后面的 session
关于新硬件的问题 我一直在疯狂地调查，但没有找到任何关于为什么我的 H.264 编码视频在这些新设备上停止工作的线索。 上下文:直接从 ios 设备，将原件发送到 s3，aws 弹性转码器然后将原件编
我是一名优秀的程序员,十分优秀！