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

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

当您使用 'device' 时，您是在告诉它以实际屏幕的分辨率为基础，而不是浏览器宽度（这是 min-width 实现的）。

使用min-widthwith/without设备的区别参考下面问题

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

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

Media query not taking effect on browser resize

css

media-queries