Question

我正在尝试创建一个响应式导航栏，到目前为止，我已经实现了我想要做的唯一事情就是修复导航栏在较小窗口中的显示效果。

正如您所看到的small resolution，当您获得较小的分辨率时，导航栏会重叠图像。

当您使用桌面分辨率时，它看起来像enter link description here右边的导航栏看起来不太正确。

如果有人能指出一些可以帮助我解决这个问题的资源，或者如果有人能够解释我需要改变什么，这将是很棒的。

也有人可以告诉我如何链接我的代码，以便让你们更容易看到我所做的事情。

由于

Answer 1

以下是您可以用于徽标的一些技巧。

从图像标记中删除任何宽度或高度属性，然后根据视口宽度缩放它。例如

<强> HTML

            $('#btnLogin').click(function () {
            $.ajax({
            url: 'http://localhost:61468/api/BTS_Admin/Login',
            method: 'POST',
            dataType: JSON,
            contentType: 'application/json',
            data: JSON.stringify({
                Email: $('#txtUsername').val(),
                Password: $('#txtPassword').val(),
            }),
            success: function (response) {
                if(response){
                //Do somethig
                  window.location.href = "Data.html";
                }else{
                    $('#divErrorText').text(jqXHR.responseText);
                    $('#divError').show('fade');               
                }
             },
             error: function (jqXHR) {
                alert('Error');
            }
        });

<强> CSS

<div class="header"> <img src="logo.jpg" class = "logo"> </div>

您可以在标题中添加多个图片标记，一个用于桌面，另一个用于移动。为每个使用不同的类，然后使用CSS媒体查询根据视口宽度一次隐藏或显示一个徽标。

HTML

.logo{
    width:50vw;
    max-width:500px;
}

CSS

<div class="header"><img src="logo-desktop.jpg" class = "logo desktop"> <img src="logo-mobile.jpg" class = "logo mobile"> </div>

我最喜欢的技术之一是使用背景图片而不是使用图片标签。这样可以在需要时轻松叠加文本，并且在移动设备上有效，因为您可以使用媒体查询在不同的视口中定义不同的图像，只需下载一个。

我希望这有帮助！

响应式Navbar与大图像

1 个答案: