媒体查询不按预期工作

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