使用em-Chrome进行CSS媒体查询

我发现了一种奇怪。我正在开发一个新的web项目，并计划在媒体查询中使用em作为单元。然而，我做了一个小测试，在Chrome中发现了一个非常奇怪的东西

您可以在此处查看整页代码笔： 此处的可编辑代码：

现在，媒体查询只需切换其中一个标签的背景颜色，没什么大不了的。放大时，您会看到颜色的变化，但缩小时，在Chrome中，颜色不会发生变化，仅当您缩小到原始级别时才会发生变化。然后，如果你再次放大，你需要向上放大3级，然后再向下放大2级，以此类推。。。我希望你能理解。关键是，它遵循某种模式

然而，在Firefox中，它的工作方式与预期的一样：在断点处，如果放大，切换颜色，缩小，切换回来

---

你知道为什么会这样吗？我发现在媒体查询中只使用最小宽度有问题，我还没有完全了解这些参数。

你能提供html和css吗？代码可以在这里看到：编辑文章并添加它。