顯示1個div，隱藏2個其他...媒體查詢不起作用

Question

而不是一次顯示1個div，我看到所有3個div都是最寬的，而且在縮小頁面時它們正在消失。我不明白爲什麼...

<style> 
@media screen and (min-width: 1280px) and (max-width: 1400px){ 
#W1400px { display: block;} 
#W1280px { display: none;} 
#W1024px { display: none;} 
} 

@media screen and (min-width: 1024px) and (max-width: 1280px){ 
#W1400px { display: none;} 
#W1280px { display: block;} 
#W1024px { display: none;} 
} 

@media screen and (min-width: 0px) and (max-width: 1024px){ 
#W1400px { display: none;} 
#W1280px { display: none;} 
#W1024px { display: block;} 
} 
</style> 

Answer 1

您需要從您的第一個媒體查詢中刪除and (max-width: 1400px)。

當前此塊僅適用於視口比1400px窄的情況。如果視口大於1400px，則會顯示所有三個div。

(min-width: 0px)也是不必要的，可以刪除。

@media screen and (min-width: 1280px) { 
 
    #W1400px { 
 
    display: block; 
 
    } 
 
    #W1280px { 
 
    display: none; 
 
    } 
 
    #W1024px { 
 
    display: none; 
 
    } 
 
} 
 
@media screen and (min-width: 1024px) and (max-width: 1280px) { 
 
    #W1400px { 
 
    display: none; 
 
    } 
 
    #W1280px { 
 
    display: block; 
 
    } 
 
    #W1024px { 
 
    display: none; 
 
    } 
 
} 
 
@media screen and (max-width: 1024px) { 
 
    #W1400px { 
 
    display: none; 
 
    } 
 
    #W1280px { 
 
    display: none; 
 
    } 
 
    #W1024px { 
 
    display: block; 
 
    } 
 
}

<div id="W1400px"> 
 
    W1400px 
 
</div> 
 
<div id="W1280px"> 
 
    W1280px 
 
</div> 
 
<div id="W1024px"> 
 
    W1024px 
 
</div>

Answer 2

試試這個，請記住，CSS是區分大小寫

@media (min-width: 1281px){ 
#w1400px { display: block;} 
#w1280px { display: none;} 
#w1024px { display: none;} 
} 

@media (min-width: 1025px){ 
#w1400px { display: none;} 
#w1280px { display: block;} 
#w1024px { display: none;} 
} 

@media (max-width: 1024px){ 
#w1400px { display: none;} 
#w1280px { display: none;} 
#w1024px { display: block;} 
}