/* iphone 6 7 8 */
body{
  background-color: #ccc;
}

/* iphone 5 */
@media screen and (max-width: 320px){
  body{
    background: blue;
  }
}

/* iphoneX */
@media screen  and (min-width: 375px) and (-webkit-device-pixel-ratio: 3){
  body{
    background-color: green;
  }
}

/* iphone6 7 8 plus */
@media screen and (min-width: 414px){
  body{
    background-color: black;
  }
}

/* ipad */
@media screen and (min-width: 768px){
  body {
    background: purple;
  }
}

/* ipad pro */
@media screen and (min-width: 1024px){
  body {
    background-color: red;
  }
}

/* pc */
@media screen and (min-width: 1100px){
  body{
    background-color: #f7f7f7;
  }
}