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

Question

我构建这个非常简单 site为了工作，我发现在移动设备上调整大小时与顶部导航栏相关的问题(请注意，该网站没有移动版本，以后也不会)。

在移动屏幕上调整大小时，导航栏保持固定，而内容可以移动。这意味着，虽然导航栏停留在左上角并部分遮挡屏幕，但文本在其下方自由移动。请引用以下截图:

Mobile: Example 1

如果查看源代码，顶部导航栏设置为固定。如果我删除此行，则在移动设备上调整大小可以正常工作，但是为内容指定的上边距(这样它就不会与导航栏重叠)会变得很大。

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

Desktop: Example 1

自从我上次使用 html 和 css 以来已经有很多年了，所以如果我遗漏了显而易见的地方，请原谅。

如何找到解决方案？

Answer 1

发生这种情况是因为您将 width 和 max-width 设置为 100% 给您的顶级类，如果您想在移动设备中解决此问题，您需要编写媒体查询

---

尝试将以下代码添加到您的 CSS 中

---

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