Responsive All Device Retina Css

/* responsive */
@media (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 320px) and (min-resolution: 192dpi), (max-width: 320px) and (min-resolution: 2dppx) {
  body {
    background-color: #7a7206;
  }
  body:before {
    content: "Phone Viewport";
  }
}

@media (min-width: 321px) and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 321px) and (max-width: 375px) and (min-resolution: 192dpi), (min-width: 321px) and (max-width: 375px) and (min-resolution: 2dppx) {
  body {
    background-color: #b98a53;
  }
  body:before {
    content: "SM Phone Viewport";
  }
}

@media (min-width: 376px) and (max-width: 426px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 376px) and (max-width: 426px) and (min-resolution: 192dpi), (min-width: 376px) and (max-width: 426px) and (min-resolution: 2dppx) {
  body {
    background-color: #d8cd3b;
  }
  body:before {
    content: "Large Phone Viewport";
  }
}

@media (min-width: 427px) and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 427px) and (max-width: 768px) and (min-resolution: 192dpi), (min-width: 427px) and (max-width: 768px) and (min-resolution: 2dppx) {
  body {
    background-color: #cdee12;
  }
  body:before {
    content: "Greather Tab Viewport";
  }
}

@media (min-width: 769px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 769px) and (max-width: 1024px) and (min-resolution: 192dpi), (min-width: 769px) and (max-width: 1024px) and (min-resolution: 2dppx) {
  body {
    background-color: #a8a015;
  }
  body:before {
    content: "Desktop";
  }
}

@media (min-width: 1025px) and (max-width: 1920px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 1025px) and (max-width: 1920px) and (min-resolution: 192dpi), (min-width: 1025px) and (max-width: 1920px) and (min-resolution: 2dppx) {
  body {
    background-color: #28272f;
    color: #fff;
  }
  body:before {
    content: "Fullscreen";
  }
}

Scss add media include breakpoint

   @import "../node_modules/include-media/dist/include-media";
   /* responsive */
   
   @font-face {
       font-family: font-type1;
       src: url('../font/trashhand.ttf');
   }
   
   $_primary_color: #350247;
   @include media('>desktop',
   '<=Lgdesktop',
   'retina2x') {}
   
   @include media('>tablet',
   '<=desktop',
   'retina2x') {}
   
   @include media('>mobile_l',
   '<=tablet') {}
   
   @include media('>mobile_m',
   '<=mobile_l') {}
   
   @include media('>phone',
   '<=mobile_m',
   'screen') {}
   
   @include media('<=phone') {}
   
   @include media('>=393px',
   '<mobile_l') {}
   
   @include media('>=414px',
   '<=mobile_l') {}
   
   @include media('>=360px',
   '<mobile_m',
   'screen') {}