正如标题所描述的，我已经使用React开发了一个响应式web应用程序带有多个@media查询的框架；当我用设备模式调整页面大小时在开发者工具中，查询工作得很好，一切都表现得很好，但是当我调整实际浏览器窗口的大小时，媒体查询不起作用。我甚至尝试改变屏幕分辨率，但问题仍然存在。
这些是我的@media查询:
@media only screen and (max-device-width: 768px) {...}
@media only screen and (max-device-width: 768px) and (min-device-width: 691px) {...}
@media only screen and (max-device-width: 768px) and (min-device-width: 576px) {...}
@media only screen and (max-device-width: 939px) and (min-device-width: 769px) {...}
@media only screen and (min-device-width: 940px) {...}
@media only screen and (min-device-width: 1024px) {...}
@media only screen and (min-device-width: 1200px) {...}
@media only screen and (min-device-width: 1510px) {...}
它可能看起来有点乱，但由于某些情况，我不得不混合最小和最大的标准，它在设备模式下完全正常工作。
和HTML视口元标签:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
我也尝试改变或删除视口元标签，但仍然没有机会。
有什么问题吗?!
device-width已被弃用，这可能是您在桌面设备上看不到更改的原因，因为当前浏览器不支持它。将查询更改为仅max或min-width
https://developer.mozilla.org/en-US/docs/Web/CSS/@media设备宽度
这里有一个例子。你会看到第一个带有设备宽度的@media实际上没有启动(浅蓝色)，但是红色的启动了https://jsfiddle.net/astombaugh/bceg3nts/5/
body {
background-color: yellow;
}
@media only screen and (max-device-width: 600px) {
body {
background-color: lightblue;
}
}
@media only screen and (max-width: 650px) {
body {
background-color: red;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
</head>
<body>
<h1>The @media Rule</h1>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "yellow".</p>
</body>
</html>