应用于导航栏的台式机和笔记本电脑的屏幕宽度

Question

许多像facebook，twitter甚至堆栈交换这样的网站如何让他们的导航栏自动变成桌面/笔记本电脑屏幕宽度的大小，我知道他们没有使用宽度：100％，因此导航栏大小调整需要地点。他们使用什么技术？是媒体查询吗？或者一些获取屏幕宽度的javascript函数然后将其应用为导航栏宽度。

Answer 1

尝试使用此代码，其行为与stackoverflow nav-bar完全相同。

body {
  text-align: center;
}
#navbar {
  height: 30px;
  width: 100%;
  background-color: black;
  text-align: center;
}
#fwcenter {
  width: 800px;
  height: inherit;
  position: relative;
  text-align: center;
  background-color: red;
}
#right {
  width: 49%;
  text-align: right;
  display: inline-block;
  height: 30px;
}
#left {
  width: 49%;
  text-align: left;
  display: inline-block;
  height: 30px;
}

<div id="navbar">
  <center>
    <div id="fwcenter">
      <div id="left">
        left
      </div>
      <div id="right">
        right
      </div>
    </div>
  </center>
</div>