我目前正在一个网站上工作,我想知道我怎样才能使我的网站不失真,当我放大和缩小。 以150%的速度缩放会使所有的导航按钮聚集在一起,导致它们彼此重叠。 我尝试使用媒体标签,证明它在其他设备上很好地工作,然而,它似乎不工作时,放大和缩小。 (注:这是我的第一个网站,所以你可以理解我的困惑)。 下面是我的代码:
HTML(&S CSS:
null
*{
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>
null
有原因我包括图像滑块是因为它扭曲以及。 当我缩小时,你可以看到我隐藏的其他图片。
任何帮助都会有帮助。 提前谢谢!
我认为缩放的问题是,你用百分比指定了尺寸,因为你的元素会根据未定义的尺寸改变自己。 如果使用PX
或VW
,问题将得到解决。。。 VW和VH也是百分比,但它们与视图端口的尺寸有一个比率,这可以防止它们在变焦时变形。 这是我的看法!
%
相对于父元素,
,而vw
和vh
相对于视图端口。
有关详细信息,请查看此链接