使用媒体查询响应导航栏问题

Question

正如您所看到的，在不同的屏幕尺寸上，我的徽标要么不合适，要么菜单与徽标重叠。

我尝试在css中添加不同的媒体查询但似乎即使我对不同的规则有不同的媒体查询（例如在小型手机上，徽标大小的宽度应为100px，而iPhone的宽度为150）它完全按照预期的方式工作。 我的问题是：

有没有办法可以创建单独的显示规则（对于手机徽标和菜单列表应该有特定的尺寸，而在平板电脑上另有e.t.c）

这是我到目前为止所尝试的内容：

@media(max-width:320px) {
    .navbar-brand{
        height:110px;
        width:80px;
    }
    }
@media(max-width:480px) {
    .navbar-brand{
        height:70px;
        width:220px;
    }
    }

等等

Answer 1

以下是您可以做的事情。我能说的最简单的方法。 将这3行代码添加到IMG中。

    position: absolute;
    top: 0;
    left: 0;

添加以下3行代码后您的网站看起来像这样： -

768分辨率案例中的

。在导航中添加新的'class or id'。减少'Width'并使用'Position'。您将以您想要的方式获得您的设计。 希望这会帮助你