CSS3媒体查询适配不同型号的手机 IphoneX/IphoneXR等

一、定义

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

二、简单使用

如果文档宽度小于 300 像素则修改背景颜色(background-color)：

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

三、适配常见手机型号

// iPhoneX、iPhoneXS
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {}

// iPhoneXR iPhone11
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {}

// iPhone11Pro
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {}

// iPhoneXSMax
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {}

// HUAWEI P40
@media only screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) {}

// HUAWEI HONOR V30
@media only screen and (device-width: 360px) and (device-height: 800px) and (-webkit-device-pixel-ratio: 3) {}

四、规则

• device-width，设备独立像素宽
• device-height，设备独立像素高
• webkit-device-pixel-ratio，设备像素比

物理像素=设备像素比*设备独立像素

一般产品介绍中的像素指的都是物理像素：

参考资料：

关于设备像素、屏幕像素密度、设备独立像素、设备像素比可以参考之前的一篇文章：https://blog.csdn.net/Charissa2017/article/details/104780820