iPhoneX 媒体查询适配的方法教程
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媒体查询(仅限移动设备)
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媒体查询
apple iphone x 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) { /* 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 */ }
补充:
/* iphone 3 */
/* iphone 4 */
/* iphone 5 */
/* iphone 6, 6s */
/* iphone 7, 8 */
/* iphone 6+, 6s+, 7+, 8+ */
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
PHP使用mysql_fetch_row查询获得数据行列表的方法,phpmysql_fetch_row_PHP教程
-
fleaphp下不确定的多条件查询的巧妙解决方法_PHP教程
-
PHP使用mysql_fetch_object从查询结果中获取对象集的方法_PHP教程
-
php+mysqli使用预处理技术进行数据库查询的方法,mysqli预处理_PHP教程
-
ThinkPHP整合Smarty模板引擎的使用以及查询方法汇总_PHP教程
-
Xcode 9下适配iPhoneX导致iOS 10不兼容问题的解决方法
-
Xcode 9下适配iPhoneX导致iOS 10不兼容问题的解决方法
-
iphoneX 适配客户端H5页面的方法教程
-
Android多媒体教程之播放视频的四种方法
-
Orcale查询日期字段的数据方法教程