限制桌面上网页的大小调整和缩放

Question

我有一个 HTML/PHP/JavaScript 文档，但我在调整大小和缩放部分时遇到了问题。我希望一切都像 Stack Overlow 的网站一样。因此，每当我调整浏览器大小时，所有内容都保持在同一个位置，不会四处移动并更改其格式。

我可以在我的代码中添加什么来完成这个？

Answer 1

很简单，在您网站的容器元素上设置宽度。是对单个元素还是对多个元素执行此操作取决于网站的设计和要求。

示例：

单个容器

header,
footer {
  min-height: 150px;
}
main {
  min-height: 400px;
  background-color: #eee;
}
.container {
  margin: 0 auto;
  width: 1060px;
}

<div class="container">
  <header>
    Header
  </header>
  <main>
    Content
  </main>
  <footer>
    Footer
  </footer>
</div>

多个容器

header,
main,
footer {
  margin: 0 auto;
  width: 1060px;
  min-height: 150px;
}
main {
  min-height: 400px;
  background-color: #eee;
}

<header>
  Header
</header>
<main>
  Content
</main>
<footer>
  Footer
</footer>