如何使我的网站在放大和缩小时不会失真?

Question

我目前正在开发一个网站，我想知道如何使我的网站在放大和缩小时不会失真。缩放 150% 会使所有导航按钮全部聚集在一起，从而导致它们相互重叠。我尝试使用媒体标签，事实证明它适用于其他设备，但是，在放大和缩小时它似乎不起作用。(注意：这是我的第一个网站，所以你可以理解我的困惑(。这是我的代码：

HTML & CSS：

*{
margin: auto;
padding: auto;
box - sizing: border - box;
font - family: Century Gothic;
}
header {
height: 15 % ;
background - size: cover;
background - position: center;
background - color: #ebebeb;
border - bottom: 5 px solid# A9A9A9;
}
@media(min - width: 768 px) and(max - width: 991 px) {
header {
height: 8 % ;
}
}
@media(min - width: 768 px) and(max - width: 1199 px) {
header {
height: 13.5 % ;
}
}
@media(min - width: 960 px) and(max - width: 1400 px) {
header {
height: 11.5 % ;
}
}
html,
body {
/*  background: #000000;*/
font - size: .80e m;
/* font-family: "Balsmiq", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/
margin: 0 % ;
padding: 0 % ;
color: #696969;
height: 100%;
width: 100%;
}
/*Carousel*/
.carousel-container {
width: 70%;
max-height: 800px;
margin: auto;
margin-top: 1%;
overflow: hidden;
border: 5px solid white;
}
.carousel-slide {
display: flex;
width: 100%;
height: 400px;
}
# prevBtn {
position: absolute;
top: 40 % ;
z - index: 10;
left: 20 % ;
font - size: 50 px;
color: white;
opacity: 0.5;
cursor: pointer;
}
#
prevBtn: hover {
color: black;
}
#
nextBtn {
position: absolute;
top: 40 % ;
z - index: 10;
right: 20 % ;
font - size: 50 px;
color: white;
opacity: 0.5;
cursor: pointer;
}
#
nextBtn: hover {
color: black;
}

<header>
<div class="main">
<div class="logo-text">
<h1 class="text-logo">TITLE</h1>
</div>
<div class="menu-container">
<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="page-wrapper">
<!--Image Slider-->
<div class="back-color">
<div class="carousel-container">
<i class="fa fa-angle-left" id="prevBtn"></i>
<i class="fa fa-angle-right" id="nextBtn"></i>
<div class="carousel-slide">
<img src="./img/testpic3.jpg" id="lastClone" alt="Could not load">
<img src="./img/testpic1.jpg" id="first" alt="Could not load">
<img src="./img/testpic2.jpg" alt="Could not load">
<img src="./img/testpic3.jpg" id="last" alt="Could not load">
<img src="./img/testpic1.jpg" id="firstClone" alt="Could not load">
</div>
</div>
</div>

我包含图像滑块的原因是因为它也会扭曲。当我缩小时，您可以查看我隐藏的其他图片。

任何帮助都会有所帮助。提前感谢！

Answer 1

我认为缩放的问题在于，您已经以百分比形式指定了尺寸，因为您的元素根据未定义的尺寸自行更改。如果您将使用px或vw问题将得到解决...VW 和 VH 也是百分比，但它们与视口的尺寸有一个比率，这可以防止它们在缩放时扭曲其形状。这就是我的看法！

%相对于父元素，
而vw和vh相对于视口。

查看此链接以获取更多信息