为什么元素从一个设备移动到另一个设备

Question

我已经为我的搜索框实现了自动完成功能，但自动完成在不同的屏幕大小下移动，在600px以上是静态的。我想把它放在我的搜索栏下面。

移动视图

桌面视图

CSS用于自动完成

.autocomplete-items {
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
position: relative;
display: flex;
align-items:center;
flex-direction: column;
}
.autocomplete-items div {
padding: 10px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
box-sizing: border-box;
cursor: pointer;
background-color: #fff; 
border-bottom: 1px solid #d4d4d4; 
width: 70%;
max-width: 630px;
position: relative;
right: 64px;
text-align: left;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
background-color: #e9e9e9; 
}

搜索栏CSS

.mainSection .searchContainer .searchBox {
border: none;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
height: 44px;
border-radius: 2px;
outline: none;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
width: 70%;
max-width: 630px;
color: #000;
}

Answer 1

我很确定是width: 70%;导致了这个问题。CCD_ 2总是取决于容器大小，因此可能会发生这样的问题。尝试使用Pixels。