How does the Vue project achieve different resolution adaptation? (media inquiries @media)

Common resolutions are as follows: (width * height)

 First of all, it must be clear that media query adaptation can be performed according to width or height . Here I am adapting according to width

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