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

Question

我的媒体查询有点问题。

使用购买的响应式 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/ 有两个图像网格元素，我只想一次显示一个。

谢谢！ 乔恩

Answer 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 附带的二十个主题之一。购买主题的问题在于它们通常设计有特定意图（或特定插件）...与您自己的意图几乎不同的意图。）