媒體查詢不按預期工作

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