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

Question

如您所见，在不同的屏幕尺寸上，我的徽标要么位置不正确，要么菜单与徽标重叠。

我尝试将不同的媒体查询添加到CSS中，但是，即使我对不同的规则有不同的媒体查询（例如，在小手机上，徽标大小应具有100px的宽度，而在iphone上应为150），但它并不完全按预期工作。 我的问题是：

有没有一种方法可以创建单独的显示规则（电话徽标和菜单列表应具有特定尺寸，而平板电脑上应具有其他尺寸，等等）

这是我到目前为止尝试过的：

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

等等

Answer 1

这是您可以做的。 我最容易分辨的方法。 将这三行代码添加到您的IMG。

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

添加这三行代码后，您的网站如下所示：-

在768分辨率的情况下。 在导航中添加新的'class or id' 。减小'Width'并使用'Position' 。您将以自己想要的方式获得设计。 希望这个能对您有所帮助