媒體查詢未對瀏覽器調整大小生效

Question

我正在致力於使其響應的網站。媒體查詢正在自己的設備上工作，但在瀏覽器上調整大小後不會生效。這是我的代碼。我錯過了什麼嗎？提前致謝！

@media only screen and (min-device-width : 320px) and (max-device-width :  
480px) and (orientation: portrait) { 

    //Code Here 

} 

@media only screen and (min-device-width : 320px) and (max-device-width : 
480px) and (orientation: landscape) { 

    //Code Here 

} 

Answer 1

這是因爲你的目標是device-width。

你需要改變你的@media queries到：

@media only screen and (min-width : 320px) and (max-width :  
480px) and (orientation: portrait) { 

    //Code Here 

} 

此外，orientation不會在這種情況下工作（在您的瀏覽器）。

Answer 2

當您使用「設備」時，您告訴它將其基於實際屏幕的分辨率，而不是瀏覽器寬度（這是最小寬度所達到的分辨率）。

有關使用最小寬度與不帶設備之間的差異，請參閱以下問題。

CSS media queries min-width and min-device-width conflicting?