固定最小宽度的标题

Question

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

我的想法是，我希望在该标题中添加一个最小宽度，以便在小于800px的窗口上，整个内容（以及标题）可以滚动。

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

JSFiddle example

Answer 1

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

示例

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

More informartion on media queries

Answer 2

您可以申请以下css：

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

这将提供您理想的输出。当您的窗口宽度低于400px;时，您的标题将可滚动。您可以使用800px;或根据需要进行更改。

检查更新后的Fiddle.

修改

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

此媒体查询css适用于400px;的最大宽度，您可以根据自己的要求进行更改。您可以从Here.

了解更多信息

希望它有所帮助。