第 8 题：如何实现浏览器响应式布局？

• 使用媒体查询（@media）

  使用媒体查询可以根据用户不同分辨率展示不同的样式（即可实现不同的布局方式），从而达到响应式布局

  @media screen and (max-width: 1920px) {
      body {
          background: red;
      }
  }
  
  @media screen and (max-width: 1600px) {
      body {
          background: blue;
      }
  }
  
  @media screen and (max-width: 1440px) {
      body {
          background: green;
      }
  }
  
  @media screen and (max-width: 960px) {
      body {
          background: yellow;
      }
  }