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?

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

2 个答案: