css - Angular 2，媒体查询在与 [ngStyle] 指令结合使用时不起作用

Question

我在一个div上设置了一些自定义属性

 <div class="logout-container"

             [ngStyle]="{'margin-left': (theme.logoutButtonMarginLeft | convertpx ),
                     'margin-top': (theme.logoutButtonMarginTop | convertpx ),
                     'margin-right': (theme.logoutButtonMarginRight | convertpx ) }"

我还使用媒体查询来设置较小屏幕尺寸的值。这个想法是为较小的设备保持一定的外观和感觉，但允许用户在较大的屏幕上有一些自由。

@media all and (max-width: 768px) and (min-width: 1px) {

.logout-container {
    margin-right: 20px;
    margin-right: 20px;
    margin-top: 20px;
}

然而，上述媒体查询没有任何效果，并且边距值在所有屏幕尺寸中保持不变。使用不同的样式语法也没有效果。从而使用

<div class="logout-container"
             [style.margin-top.px]="theme.logoutButtonMarginTop"
             [style.margin-left.px]="theme.logoutButtonMarginLeft"
             [style.margin-right.px]="theme.logoutButtonMarginRight"

也不允许媒体查询生效。

Answer 1

• 内联 css 具有第一优先权
• 内部 css 具有第二优先级
• 外部 CSS 具有最后的优先权
• 在内部/外部 css @media 查询中优先。

您可以使用 !important 关键字强制将样式应用于元素。