一、定义

使用 @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