媒體查詢的條件判斷順序

媒體查詢的細節--重點理解和掌握:（判斷最小值，並且從小到大進行判斷.如果是判斷最大值，就應該從大到小寫）

1.向上兼容：在窄屏設置的樣式。默認在大屏也會存在；
2.向下覆蓋：寬屏的樣式設置會覆蓋窄屏的樣式設置；

書寫建議：

1、如果判斷最小值(min-width)，那么就應該從小到大寫;

body{
    background: #f00;
}
@media screen and (min-width: 900px){
    body{
    background: pink;
}
}
@media screen and (min-width: 1100px){
    body{
    background: gray;
}
}
@media screen and (min-width: 1200px){
    body{
    background: purple;
}
}

2、如果判斷最大值(max-width)，那么就應該從大到小寫；

body{
    background: #e4393c;
}
@media screen and (max-width: 1200px){
    body{
       background: lightblue;
  }
}
@media screen and (max-width: 1100px){
  body{
     background: gray;
  }
}
@media screen and (max-width: 900px){
  body{
     background: purple;
  }
}