扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 移动开发 >iPhoneX 媒体查询适配的方法教程
  • 152

0
分享到

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

iPhoneX媒体查询 2022-05-18 01:05:51 152人浏览 安东尼
摘要

iPhone X尺寸 5.8 英寸 5.65 x 2.79 x 0.30 英寸 iPhone X分辨率 1125 x 2436 每英寸PX~458 像素 屏

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

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

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

--结束END--

本文标题: iPhoneX 媒体查询适配的方法教程

本文链接: https://lsjlt.com/news/30256.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • iPhoneX 媒体查询适配的方法教程
    iPhone X尺寸 5.8 英寸 5.65 x 2.79 x 0.30 英寸 iPhone X分辨率 1125 x 2436 每英寸PX~458 像素 屏...
    99+
    2022-05-18
    iPhoneX 媒体查询
  • 适配iPhoneXS max和iPhoneX R的方法示例
    18更新：经测试发现iOS12修改了非刘海屏safeArea的值! 拿iPhone6竖屏情况下为例iOS11中返回的safeAreaInsets为（0，0，0，0）；iOS12中返回...
    99+
    2022-06-01
    适配 iPhoneXSmax iPhoneXR
  • css3中媒体查询的语法简介
    小编给大家分享一下css3中媒体查询的语法简介，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！媒体查询的语法组成是“@media not|only mediatype and (expressions) {CSS代码...;...
    99+
    2023-06-14
  • CSS3中媒体查询结合rem布局适配手机屏幕的示例分析
    这篇文章主要介绍了CSS3中媒体查询结合rem布局适配手机屏幕的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。css3语法: （75...
    99+
    2024-04-02
  • css3媒体查询的语法关键字是哪个
    这篇文章将为大家详细讲解有关css3媒体查询的语法关键字是哪个，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 css3媒体查询的语法关键字是“...
    99+
    2024-04-02
  • 优化MySQL查询的具体方法
    下文主要给大家带来优化MySQL查询的具体方法，希望这些内容能够带给大家实际用处，这也是我编辑优化MySQL查询的具体方法这篇文章的主要目的。好了，废话不多说，大家直接看下文吧。    ...
    99+
    2024-04-02
  • nginx流媒体服务器配置的方法是什么
    1. 安装Nginx服务器：首先需要在服务器上安装Nginx服务器。2. 安装nginx-rtmp-module：nginx-rtm...
    99+
    2023-05-21
    nginx流媒体服务器 服务器
  • win8.1找不到媒体流选项怎么办？win8.1系统找不到媒体流选项的解决方法图文教程
    　　在Win8.1操作系统中自带有免费的Windows Media Player播放器，但是一些细心的用户发现Windows Media Player播放器中找不到媒体流选项，找了很久还是没发现，怎么回事呢...
    99+
    2022-06-04
    找不到 选项 媒体
  • 使用CSS媒体查询和JavaScript判断浏览器设备类型的方法是咋样的
    今天就跟大家聊聊有关使用CSS媒体查询和JavaScript判断浏览器设备类型的方法是咋样的，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。有无数的理...
    99+
    2024-04-02
  • Android不同版本兼容性适配方法教程
    目录Android 6Android 7Android 8Android 9Android 10定位权限分区存储Android 11强制执行分区存储位置权限Android 6 运行时...
    99+
    2022-11-13
    Android兼容性适配 Android兼容性
  • mysql通配符查询字段的方法
    小编给大家分享一下mysql通配符查询字段的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！mysql通配符查询字段的方法：1...
    99+
    2024-04-02
  • Mybatis实体类对象入参查询的方法
    本篇内容介绍了“Mybatis实体类对象入参查询的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Mybatis实体类对象入参查询测试实体...
    99+
    2023-07-02
  • iOS字体大小适配的3种方法示例代码
    前言 在iOS开发中，有些公司对字体也有适配要求，为了让字体美观，所以在不同尺寸的屏幕上字体大小也要做到适配。 自己总结了几种方法供大家参考，下面话不多说了，来一起看看详细的介绍吧...
    99+
    2022-05-21
    ios 字体 适配
  • 玩转应用Win7媒体中心 享受高品质影音生活的方法(图文教程)
    不知道究竟有多少人喜欢用Win7多媒体中心观看影片，确实，因为其支持的视频格式有限，在一定程度上影响了这款软件的推广，但是小编却很是喜欢媒体中心下炫丽的操作界面，以及把影、音、图、软件和电视完美集成于一体的便捷功能。午后...
    99+
    2023-05-26
    媒体 影音 生活 方法 高品质 图文
  • redis查询配置命令的方法是什么
    要查询Redis配置命令的方法，可以使用CONFIG GET命令。具体步骤如下：1. 使用REDIS CLI或其他Redis客户端连...
    99+
    2023-08-24
    redis
  • Android实现使用流媒体播放远程mp3文件的方法
    本文实例讲述了Android实现使用流媒体播放远程mp3文件的方法。分享给大家供大家参考，具体如下： package com.shadow.util; import java...
    99+
    2022-06-06
    mp 方法 mp3 Android
  • 适合初学者的Python装饰器的方法教程
    这篇文章主要介绍“适合初学者的Python装饰器的方法教程”，在日常操作中，相信很多人在适合初学者的Python装饰器的方法教程问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”适合初学者的Python装饰器的方...
    99+
    2023-06-16
  • mysql使用正则匹配查询关键词的方法
    我们在查询某个字段的时候，有时候只想匹配某段数据，比如想查询这篇文章的所有关键词是否存在某个关键词，我们往往需要匹配，我们下面来讲解一下如何匹配查询某个关键词值SQL模糊查询的语法为“SELECT ...
    99+
    2024-04-02
  • redis命令模糊匹配查询的方法是什么
    在Redis中，可以使用SCAN命令进行模糊匹配查询。SCAN命令是一个游标方式的迭代器，它可以逐步遍历匹配给定模式的所有键。具体步...
    99+
    2023-08-23
    redis
  • Python语法检查引用PyLint配置的具体方法是什么
    本篇文章给大家分享的是有关Python语法检查引用PyLint配置的具体方法是什么，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。Python作为一种动态语言，它在搭建比较大的系...
    99+
    2023-06-17
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作