所以我努力使网站上的一些对象在我放大和缩小时不会移动，我已经搜索了几个小时，并尝试了一些其他线程和网站上的提示，但没有为我工作...到目前为止，我只设法使文本"黑色夏天的统计"不改变大小，通过使用vw字体大小。但它不工作的其他元素...下面是一个图片与100%缩放和一个与175% zomm显示会发生什么：100% (standard)175% zoom显示器
我试着把我的值改为%，因为我知道这个问题经常发生在px值上，但是我仍然在挣扎。正如前面提到的，在"黑色夏天的统计"中把字体大小值设置为vw而不是px是有效的，但是它对其他元素不起作用。
下面是我的HTML代码：
`
<body>
<header>
<div class="banner">
<div id="nav-container">
<nav id="navbar">
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Graf</a></li>
<li><a href="#">Midtseksjon</a></li>
<li><a href="#">Bunnseksjon</a></li>
</ul>
</nav>
<img id="header" src="/images/wildfire-header.jpeg" />
</div>
<div id="info-box">
<div id="white-line"></div>
<span id="statistics"><b>Statistikk for Black Summer</b></span>
<div id="statistic-deaths">
<div id="statistic-bar1">
<span id="statistic-amount1">26</span>
<span id="statistic-typeDeaths">Dødsfall</span>
</div>
</div>
<div id="statistic-animalDeaths">
<div id="statistic-bar2">
<span id="statistic-amount2">3 Milliard</span>
<span id="statistic-typeAnimalDeaths"
>Dyr død/blitt fordrevet</span
>
</div>
</div>
<div id="statistic-homesDestroyed">
<div id="statistic-bar3">
<span id="statistic-amount3">2448</span>
<span id="statistic-typeHousesBurnt">Hus brent</span>
</div>
</div>
<div id="statistic-hectaresBurnt">
<div id="statistic-bar4">
<span id="statistic-amount4">5.5 Million</span>
<span id="statistic-typeHectaresBurnt">Hektar brent</span>
</div>
</div>
</div>
</div>
</header>下面是CSS：
body {
margin: 0;
padding: 0;
}
/* Her kommer banner/header som inneholder statistikk boks og nav meny */
.banner,
#header {
height: 50vh;
width: 100%;
}
#navcontainer {
position: relative;
width: 80%;
}
#navbar {
position: absolute;
z-index: 2;
left: 67%;
}
#navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
}
/* Design av statistikk boks */
#info-box {
height: 30%;
width: 20%;
position: absolute;
top: 20%;
left: 60%;
background-color: black;
background-color: rgba(0, 0, 0, 0.65);
}
#white-line {
position: relative;
background-color: white;
height: 1%;
width: 80%;
top: 15%;
}
/* END */
/* Statistikk overskriften i boksen */
#statistics {
position: relative;
top: 25%;
display: flex;
justify-content: center;
color: white;
font-size: 1.35vw;
}
/* END */
/* Her kommer første statistikk baren i infoboksen som inneholder antall dødsfall */
#statistic-deaths {
position: relative;
background-color: #322d31;
height: 2vh;
width: 70%;
top: 35%;
left: 50%;
transform: translateX(-50%);
}
#statistic-bar1 {
position: relative;
background-color: orangered;
width: 10%;
height: 2vh;
}
#statistic-amount1 {
position: relative;
color: white;
font-family: sans-serif;
font-size: 12px;
bottom: 15%;
left: 50%;
}
#statistic-typeDeaths {
position: relative;
color: white;
font-family: sans-serif;
font-size: 12px;
bottom: 135%;
left: 750%;
}
/* END */
/* Statistikk boksen for dyr som har død og blitt fordrevet under black summer */
#statistic-animalDeaths {
position: relative;
background-color: #322d31;
height: 2vh;
width: 70%;
top: 40%;
left: 50%;
transform: translateX(-50%);
}
#statistic-bar2 {
position: relative;
background-color: orangered;
width: 100%;
height: 2vh;
}
#statistic-amount2 {
position: relative;
color: white;
font-family: sans-serif;
font-size: 12px;
bottom: 15%;
left: 5%;
}
#statistic-typeAnimalDeaths {
position: relative;
color: white;
font-family: sans-serif;
font-size: 12px;
bottom: 15%;
left: 14%;
}
/* END */
/* Statistikk boksen til antall hus brent/skadet under black summer */
#statistic-homesDestroyed {
position: relative;
background-color: #322d31;
height: 2vh;
width: 70%;
top: 45%;
left: 50%;
transform: translateX(-50%);
}
#statistic-bar3 {
position: relative;
background-color: orangered;
width: 45%;
height: 2vh;
}
#statistic-amount3 {
position: relative;
color: white;
font-family: sans-serif;
font-size: 12px;
bottom: 15%;
left: 11%;
}
#statistic-typeHousesBurnt {
position: relative;
color: white;
font-family: sans-serif;
font-size: 12px;
bottom: 15%;
left: 125%;
}
/* END */
/* Statistikk boksen til hvor mange hektar som brente */
#statistic-hectaresBurnt {
position: relative;
background-color: #322d31;
height: 2vh;
width: 70%;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
#statistic-bar4 {
position: relative;
background-color: orangered;
width: 90%;
height: 2vh;
}
#statistic-amount4 {
position: relative;
color: white;
font-family: sans-serif;
font-size: 12px;
bottom: 15%;
left: 5.5%;
}
#statistic-typeHectaresBurnt {
position: relative;
color: white;
font-family: sans-serif;
font-size: 12px;
bottom: 15%;
left: 39.5%;
}
/* END */`
1条答案
按热度按时间jyztefdp1#
给字体大小一个vw是我所知道的唯一的方法。我测试了你的代码，它确实工作（见下面的图片）。我唯一没有添加的是一个字体大小的导航，你可以看到。
请确保您的head标签中包含以下行
文本移动，因为你设置的位置与右，左，上，下...