媒体查询未按预期工作

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 */
}