html - @media 部分样式未被应用；其他@media 部分工作

Question

我正在编辑一个预先存在的样式表。它目前有 0-319px 和 320-479px 的@media 部分，以及其他一些用于更大屏幕的部分。我正在尝试添加特定于 iPhone 的样式。但是，我的iphone的屏幕是320px，但是我不想把iphone的样式放在320-479这一段，因为我只想应用到iphone，而不是平板。因此，我在样式表末尾添加了一个新部分，最大为 329 像素，并将特定样式放在那里，但它们未被识别。

@media screen and (min-width: 0px) and (max-width: 319px) {
    .carousel-slide-dialog {
        position: relative !important;
        margin-top: 1px;
        height: auto;
        padding: 0 0 24px 25px;
        width: 100%;
        background-color: #de0662;
    }
}

@media screen and (min-width: 320px) and (max-width: 479px) {
    .carousel-slide-dialog {
        position: relative !important;
        margin-top: 1px;
        height: auto;
        min-height: 90px;
        padding: 0 0 24px 25px;
        width: 100%;
        background-color: #de0662;
    }
}

@media screen and (max-width: 329px) {
    .carousel-slide-dialog {
        min-height: 115px;
    }

    .carousel-slide-dialog p {
        max-width: 235px;
    }
}

当我在开发工具中查看样式表时，我的新部分就在那里，所以这不是缓存问题。但它没有被应用(我的窗口大小为 323 像素)。

Answer 1

您的前两个媒体查询大部分相同，除了 320-479 中的 min-height 属性。此外，@media screen and (min-width: 0px) and (max-width: 319px) 本质上与 @media screen and (max-width: 319px) 相同

你为什么不重构媒体查询，这样就不会有重叠的媒体查询，就像这样:

@media screen {
    .carousel-slide-dialog {
        position: relative !important;
        margin-top: 1px;
        height: auto;
        padding: 0 0 24px 25px;
        width: 100%;
        background-color: #de0662;
    }
}

@media screen and (max-width: 319px) {
    .carousel-slide-dialog {
        min-height: initial;
    }
    .carousel-slide-dialog p {
        max-width: initial;
    }
}

@media screen and (min-width: 320px) and (max-width: 329px) {
    .carousel-slide-dialog {
        min-height: 115px;
    }

    .carousel-slide-dialog p {
        max-width: 235px;
    }
}

@media screen and (min-width: 330px) and (max-width: 479px) {
    .carousel-slide-dialog {
        min-height: 90px;
    }
    .carousel-slide-dialog p {
        max-width: initial;
    }
}