在移动

Question

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

在移动屏幕上调整大小时，导航栏将保持固定状态，同时可以移动内容。这意味着，当导航栏停留在左上角并部分阻挡屏幕时，文本在其下方自由移动。请参阅下面的屏幕截图：

Mobile: Example 1

如果检查源代码，则顶部导航栏将设置为fixed。如果我删除此行，则在移动设备上调整大小可以正常工作，但为内容指定的上边距（因此它不会与导航栏重叠）变得非常大。

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

Desktop: Example 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;
}}