具有最小宽度的固定标题

Question

我在页面上有一个固定的标题，使用 position: fixed; .

这个想法是我想向该标题添加一个最小宽度，以便在小于 800px 的窗口中，整个内容（连同标题）都是可滚动的。

从我的研究中，我发现没有任何CSS解决方案。但是什么是JS-one？

JSFiddle 示例

Answer 1

您可以应用以下 css：

@media all and (max-width:400px){
.navbar.navbar-default.navbar-fixed-top {
    position: relative;
  }
}

这将提供您所需的输出。当您的窗口宽度低于400px;时，您的标题将是可滚动的。您可以使用800px;或任何您需要的方式进行更改。

检查您更新的小提琴。

编辑：

你必须学习媒体查询。在您的代码中navbar固定位置。在这里，我们应用媒体查询，例如：@media all and (max-width:400px) 。这意味着如果窗口宽度小于400px那么它就是我们relative设置的位置。比如：position: relative;。

此媒体查询 css 最多应用最大宽度400px;您可以根据需要进行更改。您可以从中了解更多信息 这里.

希望对您有所帮助。

Answer 2

您可以使用 CSS 媒体查询根据窗口宽度以不同的方式设置样式。在下面的示例中，仅当窗口宽度为 800 像素或更大时，标题才会固定。

例

@media all and (min-width:800px){
    header{
      position:fixed;
    }
}

有关媒体查询的更多信息