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

Question

我的媒体查询有点问题。

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

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

问题是，各种元素在不同的宽度下以不同的方式断开(这并不奇怪)。

因此，与其获得一个不错的、独有的媒体查询大小范围(例如:最大宽度:480px，最小宽度:481px --> 最大宽度:780px，最小宽度:781px --> 最大宽度: 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)控制的元素包含非常简单的声明 - 基本上使某些元素显示或不显示。我以为我已经完全专门定义了这些查询，但它们并没有按照我期望的方式工作。

问题可能与我的其他查询一团糟有关吗？ (即使在其他查询中未引用 Justified Image Grid？)

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

编辑:这是测试页面的链接: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) {
}

当屏幕低于每个相应设置时，这些将自动相互覆盖。

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

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

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