html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

aside{
  width: 10%;
  height: 100%;
  background-color: red;
  float: left;
}

main{
  background: blue;
  height: 100%;
  overflow: hidden;
}

/* ipad pro */
@media screen and (max-width: 1024px){
  aside{
    width: 8%;
    background-color: yellow;
  }
}

/* ipad */
@media screen and (max-width: 768px){
  aside{
    float: none;
    width: 100%;
    height: 10%;
    background-color: green;
  }
  
  main{
    height: calc(100vh - 10%);
    background-color: red;
  }
}

/* iphone6 7 8 plus */
@media screen and (max-width: 414px){
  aside{
    float: none;
    width: 100%;
    height: 5%;
    background-color: yellow;
  }
  
  main{
    height: calc(100vh - 5%);
    background-color: red;
  }
}


/* iphoneX */
@media screen  and (max-width: 375px) and (-webkit-device-pixel-ratio: 3){
  aside{
    float: none;
    width: 100%;
    height: 10%;
    background-color: blue;
  }
  
  main {
    height: calc(100vh - 10%);
    background-color: red;
  }
}

/* iphone6 7 8 */
@media screen  and (max-width: 375px) and (-webkit-device-pixel-ratio: 3){
  aside{
    float: none;
    width: 100%;
    height: 3%;
    background-color: #fff;
  }
  
  main {
    height: calc(100vh - 3%);
    background-color: red;
  }
}

/* iphone 5 */
@media screen and (max-width: 320px){
  body{
    color: #fff;
  }
  
  aside{
    float: none;
    width: 100%;
    height: 7%;
    background-color: green;
  }
  
  main{
    height: calc(100vh - 7%);
    background-color: blue;
  }
}