## 条件覆盖 最终后面设置的样式会将前面的样式进行覆盖掉.前提是顺序不能错. ``` 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; } } ```