移动视图媒体查询被我的平板电脑媒体查询覆盖。为什么？

Question

当我使用移动视图时，平板电脑视图媒体查询始终会覆盖我的移动媒体查询。为什么会出现这种情况？

我就是这样添加的。

/* X-Small 设备（竖屏手机，小于 576px）*/ @media（最大宽度：575.98px）{

body .pdf-post-page .postcard-wrapper,
body .pdf-post-page .order-summary-cards .postcard-wrapper {
    height: 218px !important;
    padding: 10px 10px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
}

}

/* 中型设备（平板电脑，小于992px）*/ @media（最大宽度：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);
}

}

此平板电脑媒体查询始终优先于我的手机媒体查询。任何原因？预先感谢。

我尝试添加重要标签，但会影响其他方式。

Answer 1

确保您的网站按降序排列，例如（1200px、900、700）。如果这不能解决您的问题，您可以在 css 属性末尾添加 !important 。 谢谢。