媒体查询未对浏览器调整大小生效

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?