我试图做到这一点，以便当我的用户调整那里的窗口大小时，它不会移动页面上的任何内容，也不会调整任何内容的大小。但我仍然不希望网站在不同的屏幕尺寸上看起来一样。因为现在网站会移动我的图像和按钮。按钮也会改变大小。
* {
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>最佳答案
在您的元素上设置 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;
}
关于html - 调整窗口大小时如何使网站不发生任何变化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43020757/