媒体查询的条件判断顺序

媒体查询的细节--重点理解和掌握:（判断最小值，并且从小到大进行判断.如果是判断最大值，就应该从大到小写）

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;
  }
}

转载于:https://www.cnblogs.com/lisen203/p/10496493.html