如何在调整屏幕大小时将元素保持在同一位置

Question

有没有一种方法可以在不使用太多媒体查询的情况下调整屏幕大小时将元素保持在同一位置？我已经在网页中有媒体查询，但我无法使元素保持在完全相同的位置。

@media(max-width:550px){ #header{height:150px;} }
@media(max-width: 600px){#nacap{ position:relative; left:200px; top:0px; font-size: 30px;} #header{height:150px; overflow: scroll;} }
@media(min-width: 600px){#nacap {position:relative; left:60px; top:0px; font-size: 30px; } }
@media(min-width: 1000px){ #nacap{ position:relative; left:-65px; top:0px; font-size: 30px; } }

以下是该页面的链接：https://codepen.io/code7722/pen/PoNZaKR

你可以看到，当你缩小屏幕时，id为nacap的元素会从标题图像中移开，然后再移回来。顺便说一下，整个标题是一个网格，也许这是我的问题。

提前感谢您的帮助！！！

Answer 1

首先，您的媒体查询断点是"程序化得很糟糕"；。的断点

@media (max-width: 550px)和@media (max-width:600px)可以寻址同一个屏幕，就好像屏幕的宽度为500px一样，那么它就完全满足了两者的要求。最小宽度查询也是如此。如果你的屏幕现在正好是600px，那么你会遇到同样的问题，因为它填满了4个查询中的2个。它至少填充600px，最大填充600px。

此外，你的格式很难检查和阅读。

正确的格式应该是：

@media only screen
and(max-width: 550px) { 
#header {
height: 150px;
} 
}
@media only screen
and (min-width: 551px)
and (max-width: 600px) {
#nacap { 
position: relative; 
left: 200px; 
top: 0px; 
font-size: 30px;
} 
#header {
height: 150px; 
overflow: scroll;
} 
}
@media only screen
and (min-width: 601px)
and (max-width: 1000px) {
#nacap {
position: relative; 
left: 60px; 
top: 0px; 
font-size: 30px; 
} 
}
@media only screen
and (min-width: 1001px) { 
#nacap { 
position: relative; 
left: -65px; 
top: 0px; 
font-size: 30px; 
} 
}

然后是第二个，一个具有顶部和左侧的postion: relative不起作用，除非你有一个具有position: absolut的父级。然而，如果你想让它处于完全相同的位置，那么使用position: fixed会更明智。