Vue 项目如何实现不同分辨率适配？（媒体查询@media）

常见的分辨率如下图：（宽 * 高）

 首先要清楚可以根据宽度或者高度来进行媒体查询适配，我这里是按照宽度进行的适配

// 1.如果文档宽度小于 1920 像素则修改背景颜色
@media only screen and (max-width: 1920px) {
   body {
    background-color: red;
  }
}

// 2.在1680*1050分辨率下
@media only screen and (max-width: 1680px) {
   body {
    background-color: red;
  }
}

// 3.在1600*900分辨率下
@media only screen and (max-width: 1600px) {
   body {
    background-color: red;
  }
}

// 4.在1440*900分辨率下
@media only screen and (max-width: 1440px) {
   body {
    background-color: red;
  }
}

// 5.在1400*1050分辨率下
@media only screen and (max-width: 1400px) {
  body {
    background-color: red;
  }
}

// 6.在1366*768分辨率下
@media only screen and (max-width: 1366px) {
   body {
    background-color: red;
  } 
}