在移动设备上调整顶部导航栏的大小时出现问题

Question

我建立了一个非常简单的工作网站 ，并在移动设备上调整大小时发现了与顶部导航栏相关的问题（请注意，该网站没有移动版本，现在也不会）。

在移动屏幕上调整大小时，导航栏保持固定，而内容可以移动。 这意味着，尽管导航栏停留在左上角并部分阻塞了屏幕，但文本在其下方自由移动。 请参考以下屏幕截图：

移动设备：示例1

如果您检查源代码，则顶部导航栏将设置为固定。 如果我删除此行，则在移动设备上调整大小的效果很好，但是为内容指定的上边距（以便与导航栏不重叠）变得很大。

但是，更改此页边距会影响在计算机上调整窗口大小时的导航栏，如下所示：

桌面：示例1

自从我上一次使用html和css以来已经有很多年了，所以如果我错过了显而易见的内容，请原谅。

我如何找到解决方案？

Answer 1

之所以发生这种情况，是因为您给顶级产品提供了100％的宽度和最大宽度，如果您想在移动设备中解决此问题，则需要编写媒体查询

---

尝试下面的代码到你的CSS

---

@media (max-width: 500px){ 
div.top{
    width: auto;
    max-width: none;
}}

Answer 2

如果要在移动视图中显示导航，请使用以下代码。

---

@media (max-width: 500px){ 
div.top{
    position: relative;
}
div.normal{
    margin-top:200px;
}
ul.menu li{
    float: none;
}}