为什么我的 CSS 媒体查询没有根据我的标准进行响应？

Question

我的 CSS

中有以下媒体声明

@media all and (max-width: 425px) {
    .Home-image {
        display: none;
    }

    .Home-col-1-1 {
        justify-content: space-around;
        background-color: rgba(255, 255, 255, 0.897);
        padding: 2rem;
    }

    .Home-col-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('../Home/cocktail-illustration.jpg');
        background-size: contain;
        background-position-y: 110%;
        background-color: #52b6d0;
    }
}

@media all and (min-width: 768px) {
    .Home-col-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: blanchedalmond;
    }

    .Home-image {
        background-image: url('../Home/cocktail-illustration.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #52b6d0;
        background-position-y: 50%;
        background-position-x: 20%;
    }
}

而且内容只是在 425 像素以下和 768 像素以上正常显示。问题是我指定出现在 (min-width: 768px) 中的内容不会出现在 425px 和 768px 之间。任何人都可以看到问题出在哪里吗？ :/

Answer 1

听起来您已经回答了自己的问题。

如果设备的最小宽度是 768px 到运行一些 CSS 并且设备的最大宽度是 425px 到运行另一个 CSS ，那么对于 425px 和 768px 之间的设备，将不会有任何 CSS 到运行。

听起来您可能根本不需要最小宽度查询。

为什么我的 CSS 媒体查询没有根据我的标准进行响应？

Why aren't my CSS media queries responding based on my criteria?

css

media-queries