Question

我有一个滑动打开和关闭的菜单栏。当屏幕足够小时，它的闭合状态也是它的样子。所以，我基本上有两次相同的样式：一次作为一个类，一次作为媒体查询。

有什么方法可以避免这种情况吗？

编辑¹：

我想避免使用媒体查询样式和类。如果通过类和媒体查询应用相同的样式有一些聪明的方法，那就太好了。

编辑²：

代码示例（用于说明目的）：

menu {
    width: 100px;
}

menu.closed { /*triggered via class addition in javascript */
    width:10px;
}

@media (max-width:1000px) {
    menu { /*notice how this is the same as the closed class*/
        width:10px;
    }
}

Answer 1

您使用纯CSS 获得了最紧凑的代码。

要获得更多dry CSS代码，您可以使用 CSS预处理器。

它们被标记为dynamic-css。其中一些是less和sass。

<强> Less example ：

@small-menu: 10px;

menu {
    width: 100px;
}

menu.closed {
    width: @small-menu;
}

@media (max-width:1000px) {
    menu {
        width: @small-menu;
    }
}

<强> Sass example ：

$small-menu: 10px;

menu {
    width: 100px;
}

menu.closed {
    width: $small-menu;
}

@media (max-width:1000px) {
    menu {
        width: $small-menu;
    }
}

使用CSS进行类和媒体查询

1 个答案: