javascript - CSS/HTML : How to make a left side div responsive that collapse when minimized the browser

Question

所以我有两个分区页面主体的 div，但我需要在用户最小化页面时折叠左侧的 div。当它单击折叠的侧 div 时，它会返回到上一个。

html

<div class="" style="display:flex; min-height:700px;">
        <div class="left_temp_sider">
            DIV1
        </div>
        <div class="right_temp_sider">
            DIV2
        </div>
</div>

CSS

.left_temp_sider{
   min-width: 300px;
   margin-top:70px;
   padding:20px 0px 20px 35px; 
}
.right_temp_sider{
   flex:1;
}

Answer 1

尝试媒体查询:需要重置最小宽度而不是最大宽度

@media screen and (max-width: 600px) {
    .left_temp_sider{
         min-width: 50px;

    }
}

如果您的视口(viewport)宽度小于 600 像素，将应用 @media 中指定的 CSS 规则。