html - 如果有 hidden-xs 则应用 CSS 类

Question

我有 div 元素:

<div class="...">...</div>

因此，当窗口的大小调整为最小宽度并应用 hidden-xs 样式时，我需要向我的 div 添加更多的类。调整窗口大小后应该是:

<div class="... margin-top padding-top">...</div>

如何将这些条件添加到 css 中？附:也许可以通过 Angularjs 直接在 html 中执行？

Answer 1

您不能在 CSS 中动态添加/删除类。

您可以做的是使用 @media 查询动态添加/重置样式。

假设所有目标元素都有一个名为 .target-el 的类。您所要做的就是:

• 为小型和大型尺寸设置 .target-el.margin-top 规则。
• 对 .target-el.padding-top 做同样的事情。
• 不是删除类，而是根据该规则的默认值将规则设置为 auto, none, 0。
• 我设置了类 .margin-top 和目标标记类 .target-el 所以你仍然可以使用默认的 .margin- class 在代码的其他地方正常工作。

这是一个例子:

.target-el {
    width: 50px;
    height: 50px;
    background-color: #ccc;
    position: absolute;
}

.target-el.margin-top {
    margin-top: 0;
}

.target-el.padding-top {
    padding-top: 0;
}

@media screen and (max-width: 700px) {
    .target-el.margin-top {
        margin-top: 10px;
    }

    .target-el.padding-top {
        padding-top: 5px;
    }
}

<div class="target-el padding-top margin-top"></div>