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

我目前正在一个网站上工作，我想知道如何才能使我的网站在放大和缩小时不失真。以150%缩放使所有导航按钮都聚集在一起，从而使它们相互重叠。我试着使用媒体标签，这被证明可以很好地与其他设备配合使用，但是，当放大和缩小时，它似乎不起作用。（注：这是我的第一个网站，所以你可以理解我的困惑）。这是我的密码：

HTML和CSS：

*{
保证金：自动；
填充：自动；
框大小：边框框；
字体系列：世纪哥特式；
}
标题{
身高：15%；
背景尺寸：封面；
背景位置：中心；
背景色：#ebebebeb；
边框-底部：5px固体#A9A9；
}
@介质（最小宽度：768像素）和（最大宽度：991像素）{
标题{
身高：8%；
}
}
@介质（最小宽度：768像素）和（最大宽度：1199像素）{
标题{
身高：13.5%；
}
}
@介质（最小宽度：960像素）和（最大宽度：1400像素）{
标题{
身高：11.5%；
}
}
html，
身体{
/*背景：#000000*/
字体大小：.80e米；
/*字体系列：“Balsmiq”、“Lucida Grande”、“Segoe UI”、Arial、Helvetica、Verdana、无衬线字体*/
利润率：0%；
填充：0%；
颜色：#6969；
身高：100%；
宽度：100%；
}
/*旋转木马*/
.转盘式集装箱{
宽度：70%；
最大高度：800px；
保证金：自动；
利润率最高：1%；
溢出：隐藏；
边框：5px纯白；
}
.旋转滑梯{
显示器：flex；
宽度：100%；
高度：400px；
}
#prevBtn{
位置：绝对位置；
最高：40%；
z指数：10；
左：20%；
字体大小：50像素；
颜色：白色；
不透明度：0.5；
光标：指针；
}
#
prevBtn:悬停{
颜色：黑色；
}
#
下一个{
位置：绝对位置；
最高：40%；
z指数：10；
右：20%；
字体大小：50像素；
颜色：白色；
不透明度：0.5；
光标：指针；
}
#
下一步：悬停{
颜色：黑色；
}

标题

我认为缩放的问题在于，您以百分比的形式指定了维度，因为您的元素会根据未定义的维度自行更改。如果您将使用

px

或

vw

问题将得到解决。。。VW和VH也是百分比，但它们与视口的尺寸有一个比率，这可以防止它们在缩放时扭曲形状。这就是我对它的看法

%

是相对于父元素的，
然而，

vw

和

vh

是相对于查看端口的

---

查看此链接了解更多信息

我是否能够解决您的问题？或者你还需要其他帮助吗？请让我知道！如果我能解决你的问题，那么请接受我的回答是的。我试过，用vh和vw，它似乎仍然扭曲。这令人困惑