html - 固定元素忽略水平滚动

Question

我正在创建网站，但遇到了一个小问题。最后我设置了 min-width: 1200px。当我将我的互联网浏览器更改为较小的分辨率并水平滚动时，它不会影响我的菜单项!我该如何解决？

#page{
     width: 1200px; height:1000px;
}
#page #primaryMenu {
  min-width: 1200px;
  background-color: #151414;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 14px;
  width: 100%;
  position: fixed;
  z-index: 10;
  box-shadow: 0 0 5px black;
}

#page #primaryMenu li {
  display: inline-block;
  margin: 20px 10px;
  cursor: pointer;
}

#page #primaryMenu li a {
  text-decoration: none;
  color: white;
  transition: 0.65s;
}
        
#page #primaryMenu li a:hover {
  transition: 0.5s;
  color: #d10239;
 }

<div id="page">
  <ul id="primaryMenu">
    <li><a href="index.html">STRONA GŁÓWNA</a></li>
    <li><a href="fryzjerstwo.html">FRYZJERSTWO</a></li>
    <li><a href="kosmetyka.html">KOSMETYKA</a></li>
    <li><a href="solarium.html">SOLARIUM</a></li>
    <li><a href="galeria.html">GALERIA</a></li>
    <li><a href="kontakt.html">KONTAKT</a></li>
  </ul>
</div>

编辑

我不想让我的网站响应，我想为所有设备设置 min-width 1200px;。它的菜单固定在顶部，我不想跟随垂直滚动。示例:当我将网络浏览器分辨率更改为 200x200 并尝试向右滚动时，我的菜单(列表项)保持在同一位置。

Answer 1

问题是，当您以像素为单位提供 min-width 时，它实际上占用了 1200px 的宽度。

如果您正在尝试实现响应式设计，请使用百分比。

示例:对于 #page #primarymenu，使用宽度作为 100% 或您想要的值(百分比)。然后它将在所有尺寸的屏幕上正常工作

width:100%; 

或

min-width:90%