Question

我目前正在开发一个网站，其静态左侧边栏通常为250px宽但是我遇到了一个问题，当用户在屏幕分辨率低于大约1200px的屏幕分辨率的计算机上时在屏幕上占用太多空间。

我将如何设置它以便有一个按钮将侧边栏折叠到100px并且它将在使用网站时保存状态？然后，一旦它被折叠，用户可以使用另一个按钮将侧边栏扩展回其原始状态？

此外，当用户点击“折叠”或“展开”按钮时，我不希望整个页面刷新，因为网站上有很多表单，如果页面刷新，则用户必须重新输入他们所有的细节（如果他们点击中间的按钮）。

任何帮助将不胜感激！

谢谢！

Answer 1

最好的办法是设置CSS media queries，以便在没有任何用户互动的情况下在较小的屏幕上自动调整侧边栏的大小。这是一个示例（显然，您必须将选择器替换为适用于您页面的选择器）：

@media(min-width:992px){
    .sidebar {width:150px}
}

@media(min-width:1200px){
    .sidebar {width:250px}
}