CSS媒体查询-混淆重叠和顺序

我的媒体查询有点麻烦

建立一个网站使用购买的响应wordpress主题，我现在定制它

我遇到了一个问题，由于设计在一系列屏幕宽度上的表现，每当设计中断时，我都会使用媒体查询进行调整

问题是，不同的元素在不同的宽度以不同的方式断裂（这并不奇怪）

因此，它没有得到一个好的、独占的媒体查询大小范围（例如：最大宽度：480px，最小宽度：481px-->最大宽度：780px，最小宽度：781px-->最大宽度：960px，最小宽度961px），而是变成了一堆重叠的查询

以下是我迄今为止在CSS中得到的示例，移除CSS只是为了节省空间：

@media only screen and (max-width: 961px) {
    /* upto 961px */


@media only screen and (min-width: 885px) and (max-width: 961px) {
    /* 885px upto 961px */


@media only screen and (min-width: 768px) and (max-width: 884px) {
    /* 768px upto 884px */


@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* upto 767px */


@media only screen and (max-width: 550px) {
    /* Shrinks top nav text size for smaller screens*/


@media only screen and (min-width: 481px) and (max-width: 550px) {
    /* Adjusts search bar location*/


@media only screen and (max-width: 565px) {
    /* Toggles correct Justified Image Grid for home page buttons */


@media only screen and (min-width: 566px) and (max-width: 721px) {
    /* Toggles correct Justified Image Grid for home page buttons */


@media only screen and (min-width: 722px) and (max-width: 902px) {
    /* Toggles correct Justified Image Grid for home page buttons */


@media only screen and (min-width: 903px) {
    /* Toggles correct Justified Image Grid for home page buttons */

很乱吧？请友善一点，我还在学这些东西：）

所以我现在的主要问题是：我在最后4个媒体查询中控制的元素（目标是对齐的图像网格）包含非常简单的声明——基本上是让某些元素显示还是不显示。我以为我已经完全定义了这些查询，但是它们没有按照我期望的方式工作

这个问题可能与我的其他问题有关吗？（即使在其他查询中未引用对齐的图像网格？）

我非常乐意接受关于如何在这种情况下处理查询的建议，我想这种情况在web构建中经常发生

编辑： 以下是指向测试页面的链接： 有两个图像网格元素，我只想一次显示一个

谢谢！

---

Jon

简化问题的一种方法是删除同时具有最小值和最大值的查询的最小宽度部分。然后在仅使用最大宽度查询时，将它们从最大值到最小值排序

@media only screen and (max-width: 961px) {
}
@media only screen and (max-width: 884px) {
}
@media only screen and (max-width: 767px) {
}

当屏幕低于每个相应设置时，它们将自动相互覆盖

就我个人而言，我只使用“最大宽度”设置并相应地进行调整，如果设置正确，希望您也能得到同样的结果

您可能遇到问题的一个原因是，如果两个查询具有一些相同的大小参数（重叠条件），则最后一个查询将优先于另一个查询，而这可能不是您预期的结果

---

（另外，我个人购买wordpress主题的体验不太令人满意，你最好定制wordpress附带的20个主题中的一个。购买主题的问题是，它们通常设计有特定的意图（或特定的插件）…这个意图几乎与您自己的意图不一样。）

老实说，对这么多查询的需求向我表明，布局对于现代web环境来说并不实用。我很少有两个以上的媒体查询范围。我不想再维持下去了。不过，你没有说你期望他们如何工作，他们如何不工作。我认为问题不在质询之内。发布网站链接和/或问题截图。-这些媒体查询看起来不错，您可以根据需要定义任意数量的查询，即使它们重叠。你不需要像其他人建议的那样，将所有规则都集中在几个预设的媒体查询中。非常好@bfred.it。这里有一个链接：---您可以看到页面上有两个图像网格元素，但是由于插件的一些限制，我需要在中调用不同配置的版本，因为它们在特定的页面宽度处断开。所以我只想在任何给定的宽度上看到一个。但尽管有我的媒体查询规则，有时它们都会显示出来。希望这有助于澄清我的问题…谢谢约瑟夫-这是一个不错的选择。但是这种情况如何呢？假设中间有一系列的屏幕宽度（760PX-920PX，只是为了论证），我需要做一些调整。但是在这个范围之外，无论是上面还是下面，原始的CSS都很好。然后，我必须在max-width:759px查询中重新定义我的原始CSS参数，以抵消前面max-width:920px语句中所做的更改？（对不起，我一点也不挑剔——我的网站就是这样）。我想在这种情况下你是对的，但我自己从来没有遇到过这种情况。理论上，“min和max在一起”应该可以很好地工作，但在实践中（以及跨浏览器），我不确定，您可能需要像您所说的那样，通过使用两个媒体查询来重新定义内容。好吧，很公平。我觉得我的处境有点奇怪，试图让一个插件做一些它可能并不完全打算做的事情。。。现在不得不努力让它屈服——总是很有趣！