note 8 viewport

device width : 414px

device height : 846px

해상도 1440 * 2960

CSS media query

@media only screen and (min-width: 414px) { /* Your Styles... */ }

 - mobile only

@media only screen and (min-width: 414px) and (max-width: 767px) { /* Your Styles... */ }

- Retina styles

@media
  only screen and (-webkit-min-device-pixel-ratio: 3.5),
  only screen and (   min--moz-device-pixel-ratio: 3.5),
  only screen and (     -o-min-device-pixel-ratio: 3.5/1),
  only screen and (        min-device-pixel-ratio: 3.5),
  only screen and (                min-resolution: 521dpi),
  only screen and (                min-resolution: 3.5dppx) { 
    /* Retina styles here */
}

- Retina 2x

@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) { 
    /* Retina styles here */
}
   

- Retina 3x

@media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 384dpi),
  only screen and (                min-resolution: 3dppx) { 
    /* Retina styles here */
}