我放置在页眉布局上的元素不随屏幕尺寸调整。元素在整个页面上飞舞。我希望元素保持在全屏 View 中的位置。我是 CSS 的新手，所以我不确定要放入哪些属性才能使它们响应。谢谢
全屏
调整后的屏幕
HTML
<header>
<p class=ramly>RamlY</p><image class=logo src="images/logo.png" height=100px
width=200px></image><p class=burger>BurgeR</p>
</header>
CSS
header{
background-color:#8e474c;
line-height: 15px;
font-size: 18px;
border-width:2px;
border-style:solid;
border-color:#d7dbdd;
width:100%;
height:15%
}
p.ramly{
font: 400 130px/0.8 'Cookie', Helvetica, sans-serif;
color: #fff;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
font-style:normal;
font-size:150px;
margin-top:35;
float:left;
margin-left:250px;
margin-right:0px;
}
p.burger{
font: 400 130px/0.8 'Cookie', Helvetica, sans-serif;
color: #fff;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
font-style:normal;
font-size:150px;
margin-top:35;
float:right;
margin-left:0px;
margin-right:220px;
}
.logo{
margin:0px;
padding:0px;
position:static
}
最佳答案
Flexbox 可能是您在这里需要的答案。
使用 Flexbox，每个 flex 元素 ( flex: 1 ) 都会在您缩放页面大小时自动扩展和缩小。您还可以对每个元素应用水平居中 ( justify-content: center ) 或垂直居中 ( align-items: center ) 以使其在其 flex 容器中居中。
header {
background-color: #8e474c;
height: 15%;
display: flex;
font-family: 'Cookie';
}
.logo {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.ramly {
color: white;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.burger {
color: white;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}<link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet">
<header>
<p class=ramly>Ramly</p>
<image class=logo src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Ramly_Burger_Logo.png"></image>
<p class=burger>Burger</p>
</header>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel lacinia magna, vel sodales mi. Praesent dapibus felis non finibus pretium. Nam dui mauris, dictum at nibh ut, vestibulum pharetra ex. Etiam quis faucibus tortor. Pellentesque luctus elementum
tortor, a molestie tellus luctus fermentum. Quisque vitae tortor quis urna imperdiet vehicula. Maecenas cursus lacus vestibulum metus vestibulum, et vulputate leo rutrum. Vivamus lobortis turpis id commodo lacinia. Integer quis mi risus.
</body>关于html - 页面中的元素根据屏幕大小更改位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51449436/