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具有第二优先级
• 外部CS具有最后的优先级
• 在内部/外部CSS @media查询中有优先级。

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