media query not working as expected

Question

why does this code make both divs appear on a landscape-oriented iPad?

/* CSS */

div{
    display:none;   
}
@media screen and (min-width: 48em) {
  /* IPAD PORTRAIT */
  body {
      /* DARK BLUE */
   background-color:#006;
  }
    div{
    display:none;  
  }
    #ipad-portrait{
    display:block;  
  }
}


@media screen and (min-width: 64em) {
  /* IPAD LANDSCAPE */
  body{
      /*bright green*/
    background-color:#3f0;  
  }


  /* an attempt to hide all divs before displaying 
     the one that says iPad landscape */
  div{
    display:none;  
  }



  #ipad-landscape{
    display:block; 
  }
}



<!-- HTML -->
 <div id="ipad-landscape">
 ipad landscape
 </div>

  <div id="ipad-portrait">
 ipad portrait
 </div>

Thanks!

Answer 1

Your min-widths overlap. A device that is a minimum of 64em wide is also a minimum of 48em wide. What you might be wanting is something like this:

@media screen and (min-width: 48em) and (max-width: 63.999em) {
/* stuff */
}