1.用媒体查询实现如下要求

1. 在页面宽度> 1200px 时页面背景为红色

@media screen and (min-width: 1200px) not (width: 1200px){
  body {
    background-color: #f00;
  }
}

2. 在页面1200px>=宽度> 900px 时页面背景为绿色

@media screen and (max-width: 1200px) and (min-width: 900px) not (width: 900px){
  body {
    background-color: #0f0;
  }
}

3. 在页面900px>=宽度> 600px 时页面背景为黄色

@media screen and (max-width: 900px) and (min-width: 600px) not (width: 600px){
  body {
    background-color: yellow;
  }
}

4. 宽度<=600px 背景为灰色

@media screen and (max-width: 600px) {
  body {
    background-color: grey;
  }
}

栅格系统主要通过在窗口不同宽度下控制元素的比例不一形成布局效果
栅格系统代码

点击展示效果，拖动窗口试试

flex布局非常方便，很简单就可以实现我们需要的元素布局效果，而且还会根据窗口来自适应布局效果
flex布局代码

点击展示效果，拖动窗口试试