不应用针对不同像素宽度的CSS查询

我面临的一个问题是在某些宽度上应用CSS。 我正在努力实现以下目标： 最初，我有以下样式：

:root { --main-bg-color: rgb(128, 128, 128);}

这将是我的主要背景色，我稍后将尝试执行以下操作：

@media screen and (width: 782px){ :root { --main-bg-color: rgb(128, 128, 0); } }
@media screen and (width: 783px){ :root { --main-bg-color: rgb(128, 0, 128); } }
@media screen and (width: 784px){ :root { --main-bg-color: rgb(65, 99, 0); } }
....
@media screen and (width: 882px){ :root { --main-bg-color: rgb(0, 128, 99); } }
@media screen and (width: 883px){ :root { --main-bg-color: rgb(99, 33, 99); } }
@media screen and (width: 884px){ :root { --main-bg-color: rgb(56, 188, 35); } }

问题是某些宽度没有应用。我读过关于这个问题的文章，我了解到这个问题可能是因为css中的像素和屏幕中的实际像素定义不同

我最终要做的是更改视图端口的宽度，使CSS中的颜色与浏览器开发人员工具中显示的宽度相匹配

我添加了一个JSFIDLE示例，但奇怪的是，在JSFIDLE上，媒体查询根本不起作用，而在我自己的项目中，一些媒体查询起作用：

---

使用

@media screen and（max width:[value]px）{…}

或

@media screen and（min width:[value]px）{…}

取决于何时应用样式。从更大的屏幕开始，在媒体查询中使用max width，对于HTML和CSS来说是一个更“自然、更容易”的思维过程，但从小屏幕开始，逐步在媒体查询中使用最小宽度被认为是最佳实践（也强制/促进使用响应式而不是自适应设计风格）。@Martin我不明白你为什么要我使用最小宽度和最大宽度。我试图实现的是在不同的像素宽度上有不同的颜色。我不是在尝试应用一个范围。例如，对于像素333，我想要绿色，像素334，我想要红色，像素335，蓝色等等，众所周知，当定位已知设备范围外的精确像素时，有时会遇到渲染问题。解决方法是将最大宽度和最小宽度结合起来。至少现在是这样做的。。。示例：

@媒体屏幕和（最小宽度：782px）和（最大宽度：982px）{…}

。让我知道这是否解决了您的问题。乏味，我知道…@Martin不，它没有为我解决问题。目前，我正在尝试以285到1400像素范围内的像素为目标。我希望这些点中的每一点都有不同的颜色。例如，目前像素777-779与我的CSS中的规则不匹配。它们应该是特定的颜色，但会返回到开始时声明的原始颜色：：root{--main bg color:rgb（128128128）；}