在移动设备的导航栏中调整徽标大小

Question

我正在快速学习所有这些，所以我希望你能帮我弄清楚。我已将我的徽标作为空白菜单项上的背景图像添加到导航栏中（可能是一种笨拙的方法，但我能找到的最佳解决方案）。它适用于桌面视图，但我不确定如何在我的移动菜单中调整大小。

您可以在此处查看实际站点：http://www.christinelellis.com

谢谢！ 克里斯汀

Answer 1

因为没有真正的问题，而且我不知道这是如何构建的，所以我将如何解决这个问题：

在菜单上，我会在列表项上添加一些overflow: hidden（不是很有必要，但至少如果你保持这样，其他按钮不会被图像覆盖，它是仍然有效。）：

#menu-main-menu li {
   overflow:hidden;
}

和然后在链接中使用真实图像 (<img>) 制作徽标链接 fluid，而不是将徽标图像设置为 background（并且这个就 SEO 而言，图片 具有正确的 alt 文本而不是 @987654325 会更好很多 @)：

HTML

<li id="menu-item-4025" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3215 current_page_item menu-item-4025">
    <a href="http://www.christinelellis.com/">
        <img src="http://www.christinelellis.com/wp-content/uploads/2015/06/main-logo-small.png" alt="christine lellis logo"/>
    </a>
</li>

然后在 CSS 中：

#menu-main-menu li#menu-item-4025 img {
   display: block;
   margin: 0 auto;
   max-width: 300px;
   width: auto;
}

你必须删除 a 链接上的 CSS，它定义了一个固定的 width 和一个固定的 height发给text-indent: -9999px; 的文本（这在SEO 方面也很糟糕......）。

这将是一个好的开始。

祝你好运

Answer 2

如果我是你，我会改变一些事情。首先，我将菜单控件跨度放在顶部的标题中，以便所有内容都排成一行。然后你可以把你的标志放在下面。所以它看起来像这样：

 <div id="header" class="header">
      <span class="menu_control>Menu</span>
      // add in rest of the header you have here
 </div>
 <div class="nav_container">
     <div class="outerlogo">
         <div class="innerlogo">
             <img src"http://www.christinelellis.com/wp-content/uploads/2015/06/main-logo-small.png" />
         </div>
     </div>
     // add rest of your html here
  </div>

  css:
  @media (max-width: 900px)
  .menu_control { width: 100%; border-width: 0; background-color: #ffffff; padding: 10px 0px 10px 20px; cursor: pointer; box-sizing: border-box; display: inline-block; max-width: 100px; margin: auto 0px; float: left;

  .outerlogo { width: 100%; height: 100%; display: inline-block; margin: auto 0px; padding: 0px; }

  .innerlogo { margin: auto 0px; display: inline-block; width: 100%; }

  .innerlogo img { width: 90%; max-width: 280px; display: inline-block; vertical-align: middle; margin: auto 0px; }

同时摆脱@media (max-width: 450px) .menu_control 和 .header，只需将最小宽度 900px 用于移动设备，或者将其切换为 610px，随心所欲。我使用 img 标签而不是背景图片，因为它更容易操作。

如果您有任何问题，请告诉我。

Answer 3

您可以使用background-size 属性调整背景图像的大小。

要定位较小的（移动）设备，您需要使用 Media 查询来定位这些设备。

您网站上的一个例子是：

/* smaller screens */
@media only screen and (min-width: 320px) {
    #menu-item-4025 a {
        ...
        background-position: top center;
        background-size: 70% 70%;
        background-repeat: no-repeat;
        background-color: #FFF;
    }
}
/* larger screens */
@media only screen and (min-width: 768px) {
    #menu-item-4025 a {
        ...
        background-size: 100% 100%;
        ...
    }
}

注意您需要根据当前的媒体查询更改 320px/768px 断点，但这应该可以帮助您开始。