Css 为什么过渡不能在更小的屏幕上工作，而不是在桌面上？

我有以下SASS样式定义：

@import "bulma/sass/utilities/initial-variables.sass";

@mixin show-sidebar-responsive($size) {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: $size;
    background-color: #24344b;
}

.sidebar-container {
    transition: width 1s;
    display: none;
}

@media (min-width: $desktop) and (max-width: $widescreen) {
    .sidebar-container {
        @include show-sidebar-responsive(250px);
    }
}

@media (min-width: $widescreen) {
    .sidebar-container {
        @include show-sidebar-responsive(280px);
    }
}

正如您在上面的代码中所看到的，我在不同的屏幕大小上使用了转换。从

$desktop

到

$widescreen

的转换工作正常，但低于

$desktop

的转换不工作，为什么

我从中获取断点

---

我忘记定义什么了

当您将

显示

从

none

更改为

flex

时，转换不适用。

---

在

$desktop

下方的屏幕大小上，您可以将

宽度设置为
0
或其他大小，或者使用一些技巧隐藏元素，但不要将
显示设置为无
 
@媒体（最大宽度：$desktop）
？或包含，例如
@包含显示边栏响应（100px）
关于默认css样式（不在media q中）这篇文章可能会有所帮助