为什么转换不能在比桌面更小的屏幕上工作

Question

我有以下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则不起作用，为什么？

我从布尔马那里取了断点。

我忘记定义什么了？

Answer 1

将display从none更改为flex时，转换不适用。在$desktop以下的屏幕大小上，您可以将width设置为0或其他大小，或者使用一些技巧隐藏元素，但不要将display设置为无。