Question

我正在创建一个带引导程序的网站，我一直试图做导航栏，除了我的手机外，一切都运行正常，因为徽标变得模糊或像素化，我不确定它是否会自动调整大小，甚至是如果我使用较小版本的徽标，它仍然看起来很模糊。

它还会粘在导航栏的底部，忽略任何填充/边距

我正在使用拉左类，因为它似乎比navbar-brand更适合图像。

HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="pull-left"><img src="images/logonavbar.png"></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">LOG IN</a></li>
        <li><a href="#">TOURNAMENTS</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

CSS

.pull-left {
    margin-top: 8px;
}

它也适用于我的迷你iPad屏幕和任何浏览器（即使缩小窗口）

这是我的网站：Windfury.net

Answer 1

您需要使用更高分辨率的图像，并将其宽度/高度设置为您希望它最终显示的尺寸。

这是因为手机的像素数比桌面屏幕多。因此，为了补偿，您的手机会拉伸像素，使其在屏幕上填充相同的空间。因此，您最终会将模糊的图像作为图像的1个像素！=手机屏幕上的1个像素，它通常会更多，具体取决于设备。

要遵循的一个好习惯是拥有一个图像，例如100x200像素，然后再拥有200 x 400像素。然后使用媒体查询将较大的图像缩小到100 x 200px，用于移动或高分辨率设备。

然而，这将需要使用背景图像。如果您只想使用图像标记，您可以使用单个较大的图像并使用css width: 100px; height: 200px正常缩小图像 - 唯一的缺点是非高分辨率设备必须下载大于必要的图像。

以下示例展示了我所说的内容，虽然比例超过了2比1，但考虑到示例中的图像非常小，并且jsfiddle在移动设备上效果不佳。

https://jsfiddle.net/s15swcn0/2/

Bootstrap Navbar Logo在手机上像素化

1 个答案: