如何解决更改窗口大小时，我的页面不断变化
首先让我指出我是HTML的新手。我正在读高中，目前正在为我的作品集制作网站。这是问题所在，我无法使页面响应。我尝试了Internet上的内容，但是它们似乎没有用。这是我的网站-http://danil1.gitastudent.online/
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Quicksand',sans-serif;
font-size:25px;
overflow-x:hidden;
}
.container {
position:absolute;
width:100%;
}
.zoom {
padding: 10px;
transition: transform .2s;
margin: 0 auto;
}
.textG {
left:730px;
top:250px;
transition-property: left;
transition-duration: 0.15s;
transition-timing-function: linear;
position:relative;
z-index:-1;
}
.textI {
left:1180px;
top:250px;
transition-property: left;
transition-duration: 0.15s;
transition-timing-function: linear;
position:relative;
z-index:-1;
}
.textT {
left:730px;
top:750px;
transition-property: left;
transition-duration: 0.15s;
transition-timing-function: linear;
position:relative;
z-index:-1;
}
.textA {
left:1180px;
top:750px;
transition-property: left;
transition-duration: 0.15s;
transition-timing-function: linear;
position:relative;
z-index:-1;
}
.container:hover .textG{
left:850px;
}
.container:hover .textI{
left:1340px;
}
.container:hover .textT{
left:830px;
}
.container:hover .textA{
left:1400px;
}
.zoom:hover {
transform: scale(1.02);
</style>
</head>
<body>
<div style="position:relative; left:30; top:30; font-size:30px;"><b>GITA.</b></div>
<div class="container">
<div class="zoom">
<img src="G.png" id="g" width="40%" style="position:absolute; left:300; top:10;">
</div>
<div class="textG">
<div><b>ABOUT</b></div>
</div>
</div>
<div class="container">
<div class="zoom">
<img src="I.png" id="i" width="40%" style="position:absolute; left:850; top:10;">
</div>
<div class="textI">
<div><b>WORKS</b></div>
</div>
</div>
<div class="container">
<div class="zoom">
<img src="T.png" id="t" width="40%" style="position:absolute; left:300; top:450;">
</div>
<div class="textT">
<div><b>GITA</b></div>
</div>
</div>
<div class="container">
<div class="zoom">
<img src="A.png" id="a" width="40%" style="position:absolute; left:850; top:450;">
</div>
<div class="textA">
<div><b>CONTACT</b></div>
</div>
</div>
</body>
</html>
解决方法
对于每种屏幕尺寸，您都可以使用：
@media screen and (min-width: 900px) {
#your Code...
}
或
@media screen and (max-width: 900px) {
#your Code...
}
更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/@media
,正如我在原始评论中提到的那样，强烈建议您不要使用CSS位置来建立布局。随着内容的变化以及您试图适应不同的视口大小，您会发现自己处于困境。
下面的代码片段并未如实地重建现有页面的每个方面，但是它演示了一种使用更少的标记和更少的CSS的更简单的方法，它将更易于管理和响应。
img {
max-width: 100%; /* prevent images from being larger than their container */
}
.big-nav {
list-style: none; /* get rid of default list styling */
padding: 0; /* get rid of default list margin */
margin: 0; /* get rid of default list padding */
max-width: 1024px; /* limit max width */
margin: 0 auto; /* center in the page */
display: grid; /* use a grid layout */
grid-template-columns: 1fr 1fr; /* two equally sized columns */
gap: 1rem; /* space between the grid cells */
}
.big-nav > * {
border: 1px dashed lightblue; /* so you can see the grid */
}<!-- set base href so your images will load -->
<base href="http://danil1.gitastudent.online/"/>
<div>
<div><b>GITA.</b></div>
<ul class="big-nav">
<li>
<img src="G.png">
<div class="label">ABOUT</div>
</li>
<li>
<img src="I.png">
<div class="label">WORKS</div>
</li>
<li>
<img src="T.png">
<div class="label">GITA</div>
</li>
<li>
<img src="A.png">
<div class="label">CONTACT</div>
</li>
</ul>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。