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

2020-01-21 07:36:28于丽

屏幕分辨率和视口

在设备上显示的像素总和称为“屏幕分辨率”。并且任何设备的实际像素总和被称为“视口”。

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


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

 

复制代码 @media only screen and (min-width: 812px) and (orientation: landscape) { /* Your Styles... */ }