为何移动端视图下平板媒体查询会覆盖移动端媒体查询？

原因分析 #

你的两个媒体查询都使用了max-width规则：

• 移动端规则针对小于575.98px的屏幕
• 平板规则针对小于991.98px的屏幕

当屏幕宽度小于575.98px时，它同时满足这两个媒体查询的条件。而CSS的核心规则是：同一优先级下，后声明的样式会覆盖先声明的样式。因为你把平板的媒体查询写在了移动端的后面，所以平板的样式会覆盖移动端的样式。

至于你添加!important后出现反向影响，是因为你只给移动端的height属性加了!important，但padding等其他属性没加。此时height会被移动端的!important强制保留，但padding会被后面平板的样式覆盖，导致整体效果不符合预期。

解决办法 #

方法1：调整媒体查询的顺序 #

把范围更小的移动端媒体查询放在平板媒体查询的后面，这样当屏幕同时满足两个条件时，后声明的移动端样式会覆盖平板样式：

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    body .pdf-post-page .postcard-wrapper,
    body .pdf-post-page .order-summary-cards .postcard-wrapper {
        height: 490px;
        padding: 30px 30px;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    body .pdf-post-page .postcard-wrapper,
    body .pdf-post-page .order-summary-cards .postcard-wrapper {
        height: 218px;
        padding: 10px 10px;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    }
}

方法2：使用精准的区间媒体查询 #

给平板媒体查询加上最小宽度限制，明确它只作用于576px到991.98px的屏幕范围，这样就不会和移动端的范围重叠：

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    body .pdf-post-page .postcard-wrapper,
    body .pdf-post-page .order-summary-cards .postcard-wrapper {
        height: 218px;
        padding: 10px 10px;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    }
}

/* Medium devices (tablets, 576px to 991.98px) */
@media (min-width: 576px) and (max-width: 991.98px) {
    body .pdf-post-page .postcard-wrapper,
    body .pdf-post-page .order-summary-cards .postcard-wrapper {
        height: 490px;
        padding: 30px 30px;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    }
}

内容的提问来源于stack exchange，提问作者I'm SF