昨天一整天都尝试了使我的页面在放大时响应，但无法实现。 甚至增加了高度和重量，但在放大页面时仍然会混淆元素。
我搜索了许多网页并尝试了每个网页，但仍然无法实现。
不知道该怎么办，我被困住了。
.container-header-image {
width: 100%;
height: auto;
}
.top-menu {
width: 100%;
height: auto;
}
.logo-name-wording {
width: 100px;
height: auto;
position: absolute;
font-family: Montserrat;
font-weight: bold;
font-size: 20px;
top: 43px;
left: 230px;
}
.link-top-menu {
width: 100%;
height: auto;
font-family: MontserratExtraLight;
font-size: 14px;
font-weight: bold;
}
.container-header-image {
width: 100%;
height: auto;
position: relative;
color: white;
}
.signup-frame-btn {
width: auto;
height: auto;
position: absolute;
top: 38px;
right: 270px;
border: 2px solid;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
border-radius: 100px;
}
.login-frame-btn {
width: auto;
height: auto;
position: absolute;
top: 45px;
right: 390px;
}
.contact-frame-btn {
width: auto;
height: auto;
position: absolute;
top: 45px;
right: 460px;
}
.blog-frame-btn {
width: auto;
height: auto;
position: absolute;
top: 45px;
right: 550px;
}
.partners-frame-btn {
width: auto;
height: auto;
position: absolute;
top: 45px;
right: 620px;
}
.activities-frame-btn {
width: auto;
height: auto;
position: absolute;
top: 45px;
right: 720px;
}
.share-your-dream-top {
width: auto;
height: auto;
position: absolute;
top: 37%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: MontserratExtraBold;
font-size: 50px;
}
.share-your-dream-bottom {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: MontserratExtraBold;
font-size: 50px;
}
.find-perfect-friend {
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: RobotoLight;
font-size: 22px;
}
.find-holiday {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: MontserratSemiBold;
font-size: 14px;
border: 1px solid none;
padding: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
border-radius: 100px;
background-color: #FF4E50;
}
.meet-partner {
margin-top: 58px;
color: #444444;
font-family: MontserratSemiBold;
font-size: 22px;
text-align: center;
}<header>
<div class="container-header-image">
<img src="https://placeimg.com/80/80/any" alt="header-picture" style="width:100%;" class="image-background" />
<div class="top-menu">
<span class="logo-name-wording">TRAVELLING</span>
<span class="link-top-menu">
<span class="activities-frame-btn">Menu 1</span>
<span class="partners-frame-btn">Menu 2</span>
<span class="blog-frame-btn">Menu 3</span>
<span class="contact-frame-btn">Menu 4</span>
<span class="login-frame-btn">Menu 5</span>
<span class="signup-frame-btn">Menu 6</span>
</span>
</div>
<div class="share-your-dream-top">
<span>TELL YOUR</span>
</div>
<div class="share-your-dream-bottom">
<span>TRAVEL EXPERIENCE</span>
</div>
<div class="find-perfect-friend">
<span>And find the perfect friend to tell</span>
</div>
<div class="find-holiday">
<span>Find your friend</span>
</div>
</div>
</header>在 JSFiddle 上，如果缩放比例为 100%，它将无法正确显示;因此您需要缩小到 50% 或更小才能看到整个页面。但是在浏览器中，它以 100% 正确显示。
jsFiddle_Link
对于响应式设计，您应该限制使用px、left、topCSS 属性，并且对position: absolute非常谨慎。并完全放弃这种使用您拥有的translate。
最好使用响应式的相对单位(如%或vh、vw、...(。
当你使用flexbox CSS时，它变得更容易。
这是一组您可以使用的 CSS。您可以更改值以更好地符合您的愿望(具有vh单位的值(，也可以从vh切换到vmin单位。这完全取决于您的期望：
html, body, header {
height: 100%;
margin: 0;
}
.container-header-image {
box-sizing: border-box;
min-height: 100%;
color: white;
background: url(https://placeimg.com/80/80/any);
background-size: cover;
display: flex;
flex-flow: column;
justify-content: space-around;
}
.top-menu {
display: flex;
flex-basis: 100%;
flex-flow: row nowrap;
justify-content: space-around;
padding-bottom: 25vh;
}
.logo-name-wording {
font-family: Montserrat;
font-weight: bold;
font-size: 4vh;
text-align: center;
}
.link-top-menu {
font-family: MontserratExtraLight;
font-size: 3vh;
font-weight: bold;
text-align: center;
}
.link-top-menu * {
margin-left: 3vh;
white-space: nowrap;
display: inline-block;
}
.signup-frame-btn {
border: 2px solid;
padding: 0.7vh 3vh 0.7vh 3vh;
border-radius: 3vh;
}
.share-your-dream-top, .share-your-dream-bottom {
font-family: MontserratExtraBold;
font-size: 8vh;
text-align: center;
}
.find-perfect-friend {
font-family: RobotoLight;
font-size: 6vh;
text-align: center;
}
.find-holiday {
text-align: center;
}
.find-holiday * {
font-family: MontserratSemiBold;
font-size: 5vh;
border: 0.5vh solid none;
padding: 1vh 4vh 1vh 4vh;
border-radius: 4vh;
background-color: #FF4E50;
white-space: nowrap;
}<header>
<div class="container-header-image">
<div class="top-menu">
<span class="logo-name-wording">TRAVELLING</span>
<span class="link-top-menu">
<span class="activities-frame-btn">Menu 1</span>
<span class="partners-frame-btn">Menu 2</span>
<span class="blog-frame-btn">Menu 3</span>
<span class="contact-frame-btn">Menu 4</span>
<span class="login-frame-btn">Menu 5</span>
<span class="signup-frame-btn">Menu 6</span>
</span>
</div>
<div class="share-your-dream-top">
<span>TELL YOUR</span>
</div>
<div class="share-your-dream-bottom">
<span>TRAVEL EXPERIENCE</span>
</div>
<div class="find-perfect-friend">
<span>And find the perfect friend to tell</span>
</div>
<div class="find-holiday">
<span>Find your friend</span>
</div>
</div>
</header>使用这种方法，缩放几乎没有任何效果。当您调整容器大小时，响应能力就会启动。
注意：我不认为"讲述你的经历"是好的英语。考虑"分享您的经验"或"讲述您的经验"。同样，"找朋友告诉"应该是"找朋友分享"。
我建议不要使用"位置"，"相对"和硬编码精确值，而是使用FlexBox或引导网格系统(基于flexbox(这将确保您的网站完美缩小，并且元素可以适应屏幕尺寸。
这里有几个链接：
https://getbootstrap.com
https://youtu.be/K74l26pE4YA
https://youtu.be/-Wlt8NRtOpo
https://youtu.be/qmPmwdshCMw
https://css-tricks.com/snippets/css/a-guide-to-flexbox```
响应式意味着您的网页处于最佳位置，并且不需要缩放！
人们认为响应式意味着元素需要更改为不同的大小。当然这是真的，但我们也通过更改元素使页面响应，这样用户就不需要再缩放了。他们已经可以放大无响应的网站了！
如果您不让用户缩放您的页面，这会解决您的问题吗？如果是这样，请将此meta元素添加到head部分：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
开发人员通常不关心缩放响应式页面中的错误。当页面布局良好时，为什么需要以任何方式缩放？
用户是否需要缩放您的页面？