## 條件覆蓋 最終后面設置的樣式會將前面的樣式進行覆蓋掉.前提是順序不能錯. ``` body { background-color: red; } @media screen and (min-width: 768px) { body { background-color: green; } } @media screen and (min-width: 992px) { body { background-color: blue; } } @media screen and (min-width: 1200px) { body { background-color: pink; } } ``` ## 注意 如果是判斷min-width應該從小往大寫,如果判斷max-width應該從大往小寫. bootstrap 就是判斷最小值. ## 補充 ``` <link rel="stylesheet" href="./css/mobile.css"> //當符合下面的條件的時候調用下面的樣式 <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:1200px)" href="./css/pc.css"> ``` ## not ``` body { background-color: black; } //不在下面的范圍內取下面的值 @media not screen and (min-width: 768px) and (max-width: 960px){ body { background-color: pink; } } ```