css - メディアクエリが期待どおりに機能しない

Question

このコードで両方のdivが横向きの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>

ありがとう！

Answer 1

最小幅が重なっています。最小幅64emのデバイスは、最小幅48emでもあります。あなたが望んでいるかもしれないものはこのようなものです：

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