Html 媒体查询不适用于谷歌开发者工具

多年来，我一直在努力弄清楚到底发生了什么。我一直在尝试在一个项目中使用媒体查询，但在使用google developer工具时，它们无法按预期工作。我想使用切换设备工具栏调整浏览器大小和样式，但我的媒体查询似乎无法使用google developer工具

我认为最大宽度适用于小于或等于一个数字的所有宽度，最小宽度适用于大于或等于一个数字的所有宽度，这对吗

这是我下面的代码。这很简单。我非常希望它在425px以下是粉红色的

正文{
保证金：0；
}
#外{
显示：表格；
高度：100vh；
宽度：100%；
}
#内在的{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
@介质（最大宽度：425px）{
#外{
背景：粉红色；
}
}

你好，世界

代码中的媒体查询应按原样工作。如果使用全屏/展开代码段链接（调整浏览器大小），您可以看到它正在工作

如果您无法在chrome dev tools设备视图中使用它，第一个原因是您的页面上缺少元视口，并且您正在模拟的设备具有高像素比率（比率>1）。添加元视口，媒体查询应按原样运行

下面是meta标记的一个示例

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

对我来说似乎很好。。。我将您的代码转换为实时演示，无法重现问题。当我运行代码段时，将其设置为全窗口，然后减小窗口大小，它将变为粉红色。在运行代码段按钮的右侧有一个

full page

链接，单击它，缩小浏览器直到看到粉红色。什么不起作用？如果您是为手机运行此功能，则需要确保正确设置了视口。什么设备是

452px？

如果您试图以手机为目标，请选择

650px

-除此之外，您的css实际上很好。猜猜看：您放大了还是缩小了？然后断点将位于不同的物理位置。