### **@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