调整窗口大小时如何使网站不发生任何变化？答案

【问题标题】：How to make site not change anything when window is resized?调整窗口大小时如何使网站不发生任何变化？
【发布时间】：2017-03-25 19:10:35
【问题描述】：

我正在努力做到这一点，以便当我用户调整那里的窗口大小时，它不会在页面上移动任何东西，也不会调整任何东西的大小。但我仍然不希望该网站在不同的屏幕尺寸上看起来相同。因为现在网站会移动我的图像和按钮。按钮也会改变大小。

* {
  box-sizing: border-box; }

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height: 100%;
}

body {
  background-color: black;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
  color: #ccc;
}

div {
  height: 100%;
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; 
}

h3 {
  position: absolute;
  font-size: 100px;
  font-weight: 100;
  color: white;
  margin-top: 70px;
  margin-left: 80px;
}

img {
    margin-top: 230px;
    margin-right: 0px;
}

.home {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
    width: 10%;
    height: 60px;
    margin-top: 180px;
    margin-left: 500px;
}

.about {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
    width: 10%;
    height: 60px;
    margin-top: 180px;
    margin-left: 750px;
}

.projects {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    line-height: 60px;
    width: 10%;
    height: 60px;
    font-size: 26px;
    margin-top: 180px;
    margin-left: 1000px;
}

.contact {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    line-height: 60px;
    font-size: 26px;
    width: 10%;
    height: 60px;
    margin-top: 180px;
    margin-left: 1250px;
}

.home:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.about:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.projects:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.contact:hover{
    border-color: #0091FF;
    color: #0091FF;
}

<!DOCTYPE html>

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="background.js"></script>
    <title>Home</title>
</head>  
<body>
    <div id="wrapper">
    <canvas class='connecting-dots'></canvas>
    
    <h3>Title</h3>
    
    <a href="#"><div class = "home">Home</div></a>
    <a href="#"><div class = "about">About</div></a>
    <a href="#"><div class = "projects">Projects</div></a>
    <a href="#"><div class = "contact">Contact</div></a>
    
    <img src="astronaut.png">
    </div>
</body>
</html>

【问题讨论】：

为什么一切都是绝对位置？
Idk，我对 Web 开发有点陌生。
好的明白。所以你想要一个带有标题的标题菜单？但是为什么是那些画布和 img 呢？
画布使用 JavaScript 来创建浮动粒子，但我没有包含 JavaScript。我不认为这是造成问题的原因。
问题是你的 html 结构和 css 位置，margin-left 等。

标签： html css button resize responsive

【解决方案1】：

在你的元素上设置 min-width: 和 min-height:。这将防止它们变得更小，然后您可以执行 max-width 和 max-height 以防止它们增长。另外，将其从 width:10%;到一个实数/绝对数。这意味着它显示在任何屏幕上的 10%。

http://codepen.io/Squeakasaur/pen/OpwWqG

* {
  box-sizing: border-box; }

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height: 100%;
}

body {
  background-color: black;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
  color: #ccc;
}

div {
  height: 100%;
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; 
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; 
}

h3 {
  position: absolute;
  font-size: 100px;
  font-weight: 100;
  color: white;
  margin-top: 70px;
  margin-left: 80px;
}

img {
    margin-top: 230px;
    margin-right: 0px;
}

.home {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
    width: 150px;
    height: 60px;
    margin-top: 180px;
    margin-left: 500px;
}

.about {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
      width: 150px;
    height: 60px;
    margin-top: 180px;
    margin-left: 750px;
}

.projects {
    position: absolute;
    border: 2px solid #CCCCCC;
        min-width: ;
    text-align: center;
    color: #ccc;
    line-height: 60px;
      width: 150px;
    height: 60px;
    font-size: 26px;
    margin-top: 180px;
    margin-left: 1000px;
}

.contact {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    line-height: 60px;
    font-size: 26px;
       width: 150px;
    height: 60px;
    margin-top: 180px;
    margin-left: 1250px;
}

.home:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.about:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.projects:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.contact:hover{
    border-color: #0091FF;
    color: #0091FF;
}

【讨论】：

我已经尝试过了，但我遇到的唯一问题是我希望将最小宽度设置为页面的 100%。但是当我将其设置为 100% 时，它最终会调整页面大小。
将元素设置为具有最小值和最大值，而不是 100%。或者这样做：宽度：150px；现在你把所有东西都设置为宽度：10%；当屏幕尺寸发生变化时，它表示当前屏幕的 10%。如果你设置一个实心宽度，你就不会遇到问题。
我希望网站在其他屏幕尺寸上看起来一样。如果我将所有内容设置为特定大小而不是百分比，在其他屏幕上会不会显得太大或太小？
不同的分辨率看起来会有所不同，但项目的宽度不会改变。现在，当您缩小网站时，您的文本开始移动到 div 之外。
好的，我将所有按钮的宽度设置为 200px。这修复了按钮移动，但下一个问题是图像仍然移动。