Question

我正在尝试这样做，以便当我用户调整窗口大小时，它不会移动页面上的任何内容，并且它不会调整任何大小。但我仍然不会在不同的屏幕尺寸上看到相同的网站。因为现在网站移动我的图像和我的按钮。按钮也会改变大小。

* {
  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>

Answer 1

在元素上设置min-width：和min-height :.这将阻止它们变得更小，然后你可以做max-width和max-height以防止它们增长。另外，从宽度改变：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;
}

当窗口调整大小时，如何使网站不改变任何内容？

1 个答案: