Sass 使用添加css方法在较大视口中调整媒体查询特定图像大小的问题

我首先启动了mobile，随着视口变大，我添加了css，但我遇到了一个关于图像缩放的问题，我似乎无法理解它

首先，我在使用Sass

@media 320我在页面上包含某个内容块的所有样式，我在该块中有一个图像，以下是此媒体查询的CSS：

    section.catalog-grid {
    position: relative;
    height: 100%;
    overflow: hidden;
    .cat-dvdr {
        @include btm-brdr;
        padding: 20px 0;
    }

    h4.catalog-title {
        font-weight: normal;
        font-size: 1.5em;
        color: $blue;
        top: 0;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    h6 {
        font-weight: normal;
        font-size: 1em;
        color: $pale-grey;
        padding: 0 10%;
        margin: 0;
        text-align: center;
    }
    img.cat-img {
        @include center;
    }
    img.rocket {
        width: 40%;
        margin-top: 30px;
    }
    img.wizard {
        width: 50%;
        margin-top: 10%;
        margin-bottom: 10%;
    }
    img.order {
        width: 60%;
        margin-top: 10%;
        margin-bottom: 10%;
    }

img.rocket {
    width: 30%;
    margin-top: 30px;
}
img.wizard {
    width: 40%;
    margin-top: 10%;
    margin-bottom: 10%;
}
img.order {
    width: 50%;
    margin-top: 10%;
    margin-bottom: 10%;
}

@media min width 568px我实际上希望图像的比例更小，下面是我添加到此媒体查询的Sass：

    section.catalog-grid {
    position: relative;
    height: 100%;
    overflow: hidden;
    .cat-dvdr {
        @include btm-brdr;
        padding: 20px 0;
    }

    h4.catalog-title {
        font-weight: normal;
        font-size: 1.5em;
        color: $blue;
        top: 0;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    h6 {
        font-weight: normal;
        font-size: 1em;
        color: $pale-grey;
        padding: 0 10%;
        margin: 0;
        text-align: center;
    }
    img.cat-img {
        @include center;
    }
    img.rocket {
        width: 40%;
        margin-top: 30px;
    }
    img.wizard {
        width: 50%;
        margin-top: 10%;
        margin-bottom: 10%;
    }
    img.order {
        width: 60%;
        margin-top: 10%;
        margin-bottom: 10%;
    }

img.rocket {
    width: 30%;
    margin-top: 30px;
}
img.wizard {
    width: 40%;
    margin-top: 10%;
    margin-bottom: 10%;
}
img.order {
    width: 50%;
    margin-top: 10%;
    margin-bottom: 10%;
}

我的想法是，因为我只添加随着视口变大而改变的样式，所以我不必为该块添加所有SAS（就像我在320px媒体查询中所做的那样），而只需添加我想要更改的规则

然而，当视口处于568px时，320px媒体查询图像百分比大小将覆盖我的568px媒体查询图像百分比大小，我不知道为什么

附件是DevTools中正在发生的事情的屏幕截图，我怀疑320px样式覆盖568px样式的原因是因为它注意到了这个特定图像的所有父元素，所以更加特殊

但是，我已经尝试从320px文件中删除特定性，以便我希望在320px文件中受影响的唯一规则是。换句话说，不包括整个块及其子块，而只包括我想要调整为这个特定视口大小的类，这也不起作用

这有意义吗

以下是截图：

---

在568px查询中，图像的目标是：

img.rocket { ... }

在320px查询中，它是：

section.catalog-grid img.rocket { ... }

由于您对320px规则有额外的特殊性，因此无论它位于样式表中的什么位置，它都将覆盖不太特殊的规则。您需要在568px规则中匹配该特异性，或者降低320px规则的特异性

在您的sass中，似乎有

image.rocket

包含在

部分中。目录网格

块：

section.catalog-grid {
    ...
    img.rocket { ... }
}

---

这将创建您看到的已编译规则。

可能重复的规则不是重复的规则。解决方案大不相同。@nwalton你看过答案上的评论了吗？@cimmanon我现在已经看过了。看起来另一个条目的css顺序有问题，而这个条目的顺序是正确的，但是有特殊性问题。不过他们也有同样的症状。