使网站响应的问题答案

【问题标题】：Trouble with making website responsive使网站响应的问题
【发布时间】：2018-01-09 20:34:30
【问题描述】：

我是 Web 开发的新手，我在为我的作品集创建的网站做出响应时遇到了麻烦。我的主要问题是我的网站使用侧边栏导航菜单......所以我坚持如何将其纳入响应性。我正在考虑使用 Bootstrap 来简化该过程，但我仍然不确定如何重新排列侧边栏，使其适合较小的屏幕尺寸而不对其进行任何重大更改。

任何提示、帮助、建议将不胜感激。谢谢！！

【问题讨论】：

你研究过其他网站是如何处理它的吗？
@DJean 欢迎来到Stack Overflow！不幸的是，这不是一个讨论论坛。我们没有能力回答如此广泛的问题。我建议你在你所在的地区找一位导师。祝你好运！
您是否阅读过 Bootstrap 文档中关于使其具有响应性的部分？
@mcon 是的，我已经完成了研究。也许我看的不是“正确”的研究……感谢您的评论！
@jpaugh 你绝对是对的。我的问题没有具体的答案。有很多方法可以解决这个问题，但问题是我个人不知道如何解决它......在这种情况下，我的导师是非常需要的。谢谢你的建议！！

【解决方案1】：

您应该查看 CSS 媒体查询。它们允许您使用浏览器的大小更改侧边栏或禁用它们，您的浏览器太小了。

【讨论】：

【解决方案2】：

您可以使用媒体查询，也可以使用 display flex 进行响应式行为：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案3】：

在 css 中，您可以在定义维度时使用百分比，如下所示：

.sidebar{
width: 50%;
}

只要您的侧边栏不在任何其他元素中，它就会自动调整为用户屏幕的 50%。如果您的侧边栏包含在另一个元素中，您必须先调整另一个元素的大小。

【讨论】：