Question

我正在编辑预先存在的样式表。目前它的@media部分为0-319px和320-479px，还有一些用于大屏幕。我试图添加特定于iPhone的样式。不过，我的iphone的屏幕是320px，但我不想把iphone风格放在320-479部分，因为我只想把它应用到iphone而不是平板电脑。所以，我在样式表的末尾添加了一个新的部分，最高可达329px，并将特定的样式放在那里，但它们没有得到识别。

@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;
    }
}

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

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;
    }
}

@media部分样式未被应用;其他@media部分工作

1 个答案: