1.用媒體查詢實(shí)現(xiàn)如下要求

1. 在頁面寬度> 1200px 時(shí)頁面背景為紅色

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

2. 在頁面1200px>=寬度> 900px 時(shí)頁面背景為綠色

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

3. 在頁面900px>=寬度> 600px 時(shí)頁面背景為黃色

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

柵格系統(tǒng)主要通過在窗口不同寬度下控制元素的比例不一形成布局效果
柵格系統(tǒng)代碼

點(diǎn)擊展示效果，拖動窗口試試

flex布局非常方便，很簡單就可以實(shí)現(xiàn)我們需要的元素布局效果，而且還會根據(jù)窗口來自適應(yīng)布局效果
flex布局代碼

點(diǎn)擊展示效果，拖動窗口試試