响应式媒体查询

@media(min-width:768px) and (max-width: 1000px) {
  .black{
    width: 500px
  }
}
@media(min-width:1001px) and (max-width: 2000px) {
  .black{
    width: 1000px
  }
}

可以用min时可以简写成

@media(min-width:768px){
  .black{
    width: 500px
  }
}
@media(min-width:1001px) {
  .black{
    width: 1000px
  }
}

需要注意的是用min时最小的在上面  max 则最大的在上面  

原因： 如果min-width 768 在下面  当屏幕是1366px 时  符合min-width1001  然后向下执行代码  也符合min-width768px  则央视覆盖  使用768px  其实 我们需要的是1001px的布局