### **@media的使用** #### 多重分辨显示： * min-width不适用，max-width才适用： ~~~ /*（小于等于 1567px） */ @media (max-width: 1568px) { } /*（小于等于 1367px） */ @media (max-width: 1368px) { } /*（小于等于 1167px） */ @media (max-width: 1168px) { } /* （小于等于 967px） */ @media (max-width: 968px) { } /* 手机屏幕（小于等于 767px） */ @media (max-width: 768px) { } ~~~ ### **常用media** ~~~ /* 横屏 */ @media screen and (orientation:landscape){ } /* 竖屏 */ @media screen and (orientation:portrait){ } /* 窗口宽度<960,设计宽度=768 */ @media screen and (max-width:959px){ } /* 窗口宽度<768,设计宽度=640 */ @media screen and (max-width:767px){ } /* 窗口宽度<640,设计宽度=480 */ @media screen and (max-width:639px){ } /* 窗口宽度<480,设计宽度=320 */ @media screen and (max-width:479px){ } /* 设备像素比为2 */ /* 常用于1px边框，还应规定 3dppx 的情况 */ @media (min-resolution: 2dppx) { } /* windows UI 贴靠 */ @media screen and (-ms-view-state:snapped){ } /* 打印 */ @media print{ } ~~~ > orientation 方向 > resolution 分辨率 > dpr === dppx >设备像素比 ~~~ /* 两倍像素下 */ @media screen and (-webkit-min-device-pixel-ratio: 2) { } /* 三倍像素下 */ @media screen and (-webkit-min-device-pixel-ratio: 3) { } ~~~ https://juejin.cn/post/6921886428158754829?share_token=27d02dfa-286c-4368-89e1-fd13f148e063