CSS 媒体查询 - 对重叠和顺序感到困惑

Posted 2023-03-06

【中文标题】CSS 媒体查询 - 对重叠和顺序感到困惑

【英文标题】：CSS media queries - confused about overlap and order

【发布时间】：2014-07-29 11:43:05

【问题描述】：

我的媒体查询有点问题。

使用购买的响应式 wordpress 主题构建网站，现在正在对其进行自定义。

我遇到了一个问题，由于设计在一系列屏幕宽度上的行为方式，我在设计中断时使用媒体查询进行调整。

问题是，不同的元素在不同的宽度上以不同的方式断裂（不足为奇）。

因此，与其获得一个很好的、专有的媒体查询大小范围（例如：最大宽度：480 像素，最小宽度：481 像素 --> 最大宽度：780 像素，最小宽度：781 像素 --> 最大宽度: 960px, minwidth 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 个媒体查询（针对 Justified Image Grid）控制的元素包含非常简单的声明 - 基本上使某些元素显示或不显示。我以为我已经相当专门地定义了这些查询，但它们并没有按照我期望的方式工作。

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

非常乐意就如何在这种情况下处理查询提出建议，我想这种情况在网络构建中经常发生......

编辑： 这是测试页面的链接：http://dev.thecyclery.net.au/home-test/ 有两个图像网格元素，我只想一次显示一个。

谢谢！ 乔恩

【问题讨论】：

老实说，对这么多查询的需求向我表明，这种布局对于现代网络条件不是很实用。我很少有超过两个媒体查询范围。我不想维护更多。

你没有说你期望它们如何工作以及它们如何不工作。我认为问题不在查询中。发布指向该网站的链接和/或问题的屏幕截图。 —— 那些媒体查询看起来不错，您可以根据需要定义任意数量，即使它们重叠。您不需要像其他人可能建议的那样将所有规则集中在几个预设的媒体查询中。

优秀点@bfred.it。这是一个链接：dev.thecyclery.net.au/home-test ------ 您可以看到页面上有两个图像网格元素，但是由于插件的一些限制，我需要调用不同配置的版本，因为它们在某些情况下会中断页面宽度。所以我只想在任何给定的宽度上看到一个。但是尽管我的媒体查询规则，有时它们都会显示。希望这有助于澄清我的问题...

【参考方案1】：

稍微简化一点的方法是删除查询中同时具有最小值和最大值的最小宽度部分。然后，在仅使用最大宽度查询时，您从最大到最小对它们进行排序。

@media only screen and (max-width: 961px) 

@media only screen and (max-width: 884px) 

@media only screen and (max-width: 767px) 

当屏幕低于各自的设置时，这些将自动相互覆盖。

我个人只使用最大宽度设置并相应地调整它们，希望如果你设置正确，你可以摆脱同样的事情。

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

（另外，我对购买的 wordpress 主题的个人体验不太令人满意，您通常最好自定义 _s 或 wordpress 附带的二十个主题之一。购买主题的问题在于它们通常设计有特定意图（或特定插件）...与您自己的意图几乎不同的意图。）

【讨论】：

感谢 Joseph - 这是一个值得考虑的好选择。但是这种情况呢：假设中间某处有一系列屏幕宽度（760px-920px，只是为了论证），我需要在其中进行一些调整。但是在这个范围之外，无论是上面还是下面，原始的 CSS 都很好。然后我必须在 max-width: 759px 查询中重新定义我的原始 CSS 参数，以抵消在之前的 max-width: 920px 语句中所做的更改？ （抱歉，根本不想挑剔 - 我的网站实际上就是这种情况）。

我想在这种情况下你会是正确的，但我自己从未遇到过这种具体情况。理论上“最小和最大一起”应该可以正常工作，但在实践中（以及跨浏览器）我不确定，你可能不得不像你说的那样通过两个媒体查询来重新定义。

好的，很公平。我想我有点奇怪，试图让一个插件做一些它可能不完全打算做的事情......现在不得不努力让它提交 - 总是很有趣！