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有第一个priotity
内部css具有第二优先级
外部css具有最后优先级
在内部/外部css @media查询中具有优先权。

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

Angular 2，媒体查询与[ngStyle]指令结合使用时无效

1 个答案: