我一直在尝试让我的网站适应任何屏幕的尺寸，但在让我的对象正确缩放到屏幕尺寸同时又相互重叠时遇到了一些麻烦。 我发现固定定位是造成这种情况的原因，但我不知道如何在不这样做的情况下使图像正确地相互重叠
这是网站：https://dewd.neocities.org/Hubworld
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image:url('epicbackground2.jpeg');
background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%;
}
</style>
<title>The web site of dewd</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/hubworld.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<link rel="stylesheet" href="hubworld.css">
<div class="container">
<img class="tv" src="/tv.png">
<div style="height:520px;width:890px;border:1px solid #0096FF;font:16px/26px Georgia, Garamond, Serif;overflow:auto;" class="middlebox">
<img src="/Welcome.png" class="Welcome"> <br>
<div>
<img src="/crt.gif" class="crtfilter">
</div>
</div>
</div>
</body>
</html>
.tv {
position: fixed;
text-align: center;
height: 108%;
width: 67%;
top: -28px;
left: 310px;
z-index: 99;
max-width: 100%;
pointer-events: none;
}
.container {
position: relative;
}
.imtip, .tvframe {
bottom: 0;
right: 0;
text-align: center;
}
.middlebox {
position: fixed;
text-align: center;
top: 132px;
left: 506px;
z-index: 95;
background-image: url(/chao.webp);
background-size: cover;
}
.crtfilter {
position: fixed;
text-align: center;
height: 520px;
width: 920px;
top: 132px;
left: 482px;
z-index: 97;
opacity: 0.3;
pointer-events: none;
}
.Welcome {
height: 100px;
width: 500px;
left: 700px;
text-align: center;
z-index: 96;
}
@media (max-width: 600px) {
.tv {
width: 100%;
}
.tvframe {
width: 100%;
}
}
@media (max-width: 601px) {
.tv {
width: 100%;
}
.tvframe {
width: 100%;
}
}
我尝试使用元视口标签，但它似乎与固定定位冲突。 我也尝试使用尝试将像素宽度和高度转换为 %s 但无济于事。
这可能有点令人困惑，但幸运的是这不是问题，需要进行一些调整。将固定位置更改为绝对位置以及其他一些技巧以按百分比对大小进行排序。可能还有很多事情要做，但这只是一个开始。
为了简单起见，电视容器应该使将来拥有更多容器更容易维护。为了提高响应速度，您可以尝试以下查询并根据需要调整电视容器的大小。
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
.tv-container {
height: 500px;
width: 414px;
position: relative;
}
.tv {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
z-index: 99;
max-width: 100%;
margin: 0 auto;
pointer-events: none;
}
.middlebox {
position: absolute;
text-align: center;
top: 16%;
z-index: 95;
left: 15%;
background-image: url(/chao.webp);
background-size: cover;
height: 54%;
width: 69%;
border: 1px solid #0096FF;
font: 16px / 26px Georgia, Garamond, Serif;
overflow: auto;
}
.Welcome {
width: 100%;
text-align: center;
}
.crtfilter {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 97;
opacity: 0.3;
pointer-events: none;
}<div class="tv-container">
<img class="tv" src="/tv.png">
<div class="middlebox">
<img src="/Welcome.png" class="Welcome">
<img src="/crt.gif" class="crtfilter">
</div>
</div>