如何制作响应性侧栏

Question

我在我的网站上设了一个侧栏，但我意识到没有响应，我也不知道如何使其响应。任何机构都可以告诉我如何制作像YouTube一样的响应式边栏。

Answer 1

向您的CSS添加媒体查询。

MDN上的

Media Queries：

  

当您要根据设备的常规类型（例如打印与屏幕），特定特征（例如浏览器视口的宽度）或环境修改网站或应用时，媒体查询非常有用（例如环境光条件）。

它取决于您的CSS结构以及您想要执行的操作，但以下内容将隐藏您的侧边栏（使用小于.sidebar的屏幕尺寸的768 pixels类。

@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

这会在屏幕尺寸为768像素或更少的屏幕尺寸上使用.sidebar类隐藏所有元素。您可以将max-width更改为min-width，使其适用于桌面等以上的屏幕尺寸。

Answer 2

好吧，如果您希望您的网站“轻松”响应，您应该考虑使用网格（Bootstrap）。

如果您需要帮助以使侧边栏响应，我们需要您至少提供侧边栏的CSS和HTML部分来帮助您。